Question

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

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

我现在正在做的是天真的方式，即使用FIELDS_CHANGE来改变我自己的节点。

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

所以我想我必须嘲笑我的'连接'界面，但不幸的是，它仍然无效。我'将'重新排序的节点'复制到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,
    },
  };
}

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

1 个答案: