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