2

在 RelayJS 中“重新排序”连接的最佳方法是什么？

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

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

它有效，但问题是我似乎无法为它写一个乐观的更新。我只能将一个 id 列表传递给我的 graphql 服务器，但这不适用于乐观更新，因为它需要实际数据。

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

原来的：

{
  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“模拟交换”来做到这一点，但有没有更简单的方法呢？

4

1 回答 1

1

由于您触发突变以响应用户重新排序项目，我假设您将项目的位置或顺序存储在服务器端。对于您正在做的事情，创建乐观响应的一种方法是使用该信息position或order信息。在服务器端，一个 item 需要提供一个额外的 field 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,
    },
  };
}
于 2016-05-16T05:50:31.647 回答