为重新排序的连接创建乐观响应

Question

在 RelayJS 中 'reorder' 连接的最佳方式是什么？

在我的用户界面中，我允许我的用户 'swap' 两个项目，但是围绕它创建一个突变有点棘手。

我现在正在做的是天真的方法，即使用 FIELDS_CHANGE 来更改我的节点本身。

它有效，但问题是我似乎无法为它编写一个乐观的更新。我可以将一个 ID 列表传递到我的 graphql 服务器，但这对乐观更新不起作用，因为它需要实际数据。

所以我想我必须模拟我的 'connection' 界面，但不幸的是，它仍然不起作用。我 'copied' 我将节点重新排序为 getOptimisticResponse 但它似乎被忽略了。数据与实际的服务器响应相匹配。（ids 简化）

原文：

{
  item: {
    edges: {
      {cursor: 1, node: {id:2}}
      {cursor: 2, node: {id:1}}
    }
  }
}

（什么都不做）：乐观回应：

{
  item: {
    edges: {
      node: {id:1}
      node: {id:2}
    }
  }
}

服务器响应：

{
  item: {
    edges: {
      {cursor: 1, node: {id:1}}
      {cursor: 2, node: {id:2}}
    }
  }
}

什么给了？是等价的（除了游标），即使我把游标加进去，还是不行

我做错了什么？还有一种更简单的方法可以将我的 ID 模拟到连接中吗？

另外，顺便说一句，有没有办法零碎地获取这些数据？现在，由于我的变异配置，重新排序两个项目会重新请求整个列表。我想我可以用 RANGE_ADD 和 RANGE_DELETE 来“模拟交换”，但是有更简单的方法吗？

Answer 1

由于您触发了一个突变以响应用户对项目的重新排序，我假设您将项目的位置或顺序存储在服务器端。对于您正在做的事情，创建乐观响应的一种方法是使用 position 或 order 信息。在服务器端，一个项目需要提供一个额外的字段position。在客户端，显示的项目按 position.

排序

当用户交换两个项目时，在您的客户端突变的乐观响应中，您只需要交换这两个项目的 position 字段。这同样适用于服务器端突变。

乐观响应代码可以是这样的：

getOptimisticResponse() {
  return {
    item1: {
      id: this.props.item1.id,
      position: this.props.item2.position,
    },
    item2: {
      id: this.props.item2.id,
      position: this.props.item1.position,
    },
  };
}

为重新排序的连接创建乐观响应

Creating an optimistic response for a reordered connection

graphql

relayjs

graphql-js