应如何通过 GraphQL 突变对列表中的项目进行重新排序并更新多个对象？

Question

我正在使用的堆栈

• Scaphold.io作为我的 GraphQL 服务器
• 客户端的Vue Apollo
• 用于处理拖放的Vue Draggable库

---

我正在尝试做什么

我正在构建一个向用户呈现多个列表的应用程序，每个列表都包含多张卡片。在列表中，用户可以对卡片重新排序。卡片也可以从一个列表移动到另一个列表，这会更改卡片的父列表以及卡片在源列表和目标列表中的顺序。

这是一个 GIF，显示了我的应用程序中的卡片/列表和重新排序的 UI。您在这里看到的都是在客户端发生的，并且更改不会持久保存到数据库中：

这是我用来构建 UI 的查询：

const foo = gql`
  query foo {
    getAccount(id: "xxxxx") {
      cardLists {        
        edges {
          node {
            id
            name
            cards(orderBy: {field: order, direction: ASC}) {
              edges {
                node {
                  id
                  name
                  order
                }
              }
            }
          }
        }
      }
    }
  }
`

这是来自 Vue Draggable 项目的 GIF，它进一步说明了我正在做的事情（注意数据中的“order”值）：

---

问题

我不知道如何构建突变来处理重新排序，以便正确保留移动的卡以及源列表和目标列表的排序更改。

在 Scaphold 中构建模式意味着我需要（我认为）使用它提供的突变。我没有找到将多个卡片和列表传递给单个突变的方法，以便我可以立即更新所有内容。

以下是 Scaphold.io 中示例项目的端点：https://us-west-2.api.scaphold.io/graphql/soreorderingexample

这是 Scaphold.io 生成的架构：https://d3uepj124s5rcx.cloudfront.net/items/1e1m2q3F170C2G3M0v2p/schema.json

---

我的问题

• 在 GraphQL 中考虑持久更改的正确方法是什么？
• 考虑到 Scaphold 的限制和固执己见的行为，我的突变应该如何进行？

Answer 1

我不了解 Scaphold，但您可以将所有项目保留在一个数组中，并且始终在一个突变中更新，也可以一项一项地更新列表项。

进行解耦手动排序的最简单方法是有一个order: Float字段，(prev.order + next.order)/2每次您想要在另外两张卡片之间移动一张卡片时，您都可以设置该字段，或者1如果您移动到后/前，则比最后一张/第一张卡片多/少。

给定浮点精度，您可以在精度受到影响之前在相同的两张卡之间执行此操作 53 次，此时您可以重新分配字段order或手动将有问题的卡向上移动然后向下移动。