如何重新排序列表中的项目以及更新多个对象，是否应该使用GraphQL突变保留？

Question

我正在使用

的堆栈

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

我想做什么

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

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

这是我用来构建我的用户界面的查询：

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，它进一步说明了我在做什么（请注意＆＃34;顺序＆＃34;数据中的值）：

问题

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

在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次，此时您可以重新分配1字段或手动移动有问题的卡然后再向下移动