在 graphql/relay 中维护有序列表

Posted 2023-03-08

【中文标题】在 graphql/relay 中维护有序列表

【英文标题】：Maintaining an ordered list in graphql/relay

【发布时间】：2017-05-12 13:55:43

【问题描述】：

我想按特定顺序显示任务列表。问题是，用户应该能够更改订单并将其保存到 graphql（用户还可以从列表中添加和删除任务）。目前我们已经将列表实现为中继连接，并且添加/删除/更新工作正常。以下是我们现在正在考虑的：

使 graphql 返回一个有序列表。然后将该列表复制到组件中的本地状态并在那里重新排序列表。然后只需将更改通知 graphql。 让 graphql 在所有任务上返回一个按排序顺序排列的数字。 使 graphql 返回一个链表。因此，每个任务都有对列表中下一个任务的引用。

在我看来，这些都存在一些问题。使用有序列表并将其复制到本地状态，我们必须以某种方式处理添加/删除操作并相应地更新本地状态。

使用数字排序顺序，如果我们使用流水号，例如1..2..3..，当我们想在数字 1 和 2 之间移动数字 200 时，我们必须更新许多数字。这似乎是很多更新，我不确定在中继/ graphql。

对于链表，更改顺序还涉及大量簿记，我不确定在中继突变中如何处理。也许从突变中返回 3 个任务（所有已将指针更改为列表中下一个的任务）并在“FIELDS_CHANGE”配置中指定？

使用relay/graphql/react 时哪个是最好的解决方案？非常欢迎其他解决方案。

【参考方案1】：

我们沿着这条路创建了一个单独的突变来移动一个项目相对于另一个项目：

一般的get 查询返回一个没有任何order 键等的有序列表 移动项目由moveBefore 或moveAfter 突变完成，返回新排序的列表。参数是新的 itemToMove 和 relativeTarget。

突变的签名大致如下：

moveAfter(itemToMove: ID!, itemToMoveAfter: ID!): Item[]

在另一个具有相同签名和行为的项目之前移动一个项目，只是服务器端逻辑有点不同。

由于我们没有使用中继，但我无法评论如何让中继了解这些更改。