Question

在进行RANGE_ADD突变时，我无法弄清楚如何完成看似非常标准的模式。

在页面加载时说我拉入并使用chatmessages分页呈现连接first: 10。我现在做一个AddMessageMutation，它在同一个连接之前做了一个前置。由于连接是由first: 10分页的，因此连接的最后一项现在已经为我的新边缘留出空间，因此从渲染中移除。我当然可以在first突变上添加+1 onSuccess，但这通常会留下一个奇怪的闪烁效果，即在最后删除并重新插入边缘。

如果我想对连接进行乐观更新，这个问题似乎变得更加困难，因为没有onOptimistic回调。

因为这似乎是一种非常常见的模式，所以我想我是否会以错误的方式接近这一点。

参考问题： https://github.com/facebook/relay/issues/384

Answer 1

我认为问题在于你在onSuccess处理程序中增加计数（即在服务器响应之后），当你想要做的是与乐观一起递增它时突变（即马上）。

试试这个：

_handleMessageCreated() {
  Relay.Store.update(new AddMessageMutation(
    {/* ... */},
    {onFailure: () => this._handleMessageCreationRollback()}
  );
  // Optimistically increment the count
  this.props.relay.setVariables({
    numMessagesToShow: this.props.relay.variables.numMessagesToShow + 1,
  });
}
_handleMessageCreationRollback() {
 this.props.relay.setVariables({
    numMessagesToShow: this.props.relay.variables.numMessagesToShow - 1,
  });
}

另请参阅：https://github.com/facebook/relay/issues/135#issuecomment-134400856

分离连接加上突变的边缘

1 个答案: