graphql - 应该如何对列表中的项目进行重新排序和更新多个对象，并使用 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，它进一步说明了我在做什么（注意数据中的“订单”值）：

---

问题

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

在 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字段或手动向上移动有问题的卡片然后再向下移动。