分页连接加上突变增加的边缘答案

【问题标题】：Paginated connection plus added edge from mutation分页连接加上突变增加的边缘
【发布时间】：2015-12-22 22:22:52
【问题描述】：

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

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

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

由于这似乎是一种非常常见的模式，我想我会问我是否以错误的方式接近这个。

在问题中引用： https://github.com/facebook/relay/issues/384

【问题讨论】：

澄清一下，在突变后添加一条消息，您希望显示所有以前的消息以及新消息，对吗？在那种情况下，setVariables() with count + 1 似乎是合理的。哪个“结束”闪烁？您是否指定了 key 属性，以便 React 不会从列表中删除项目？

标签： graphql relayjs graphql-js

【解决方案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

【讨论】：