Graphql 分页连接加上来自变异的附加边

在执行

RANGE\u ADD

变异时，我很难弄清楚如何完成一个看起来相当标准的模式

假设在页面加载时，我拉入并使用

first:10

pagination呈现连接

chatmessages

。我现在做了一个

AddMessageMutation

，它对同一个连接进行了预处理。由于连接是通过

first:10

分页的，因此连接的最后一项现在将消失，以便为我的新边留出空间，从而从渲染中删除。当然，我可以在变异的

onSuccess

上向

first

添加+1，但这通常会留下一种奇怪的闪烁效果，即在最后删除并重新插入边缘

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

onOptimistic

回调

因为这似乎是一个非常常见的模式，我想我会问我是否以错误的方式处理这个问题

本期参考文献：

---

我认为问题在于，当您要做的是与乐观突变（即立即）同步增加计数时，您正在增加成功处理程序中的计数（即，在服务器响应之后）

试试这个：

\u handleMessageCreated（）{
Relay.Store.update（新addMessage）(
{/* ... */},
{onFailure:（）=>此操作。_handleMessageCreationRollback（）}
);
//乐观地增加计数
this.props.relay.setVariables({
numMessagesToShow:this.props.relay.variables.numMessagesToShow+1，
});
}
_handleMessageCreationRollback（）{
this.props.relay.setVariables({
numMessagesToShow:this.props.relay.variables.numMessagesToShow-1，
});
}

---

另请参见：

我认为问题在于，您正在增加成功处理程序中的计数（即，在服务器响应后），而您要做的是与乐观变异同时增加计数（即，立即）

试试这个：

\u handleMessageCreated（）{
Relay.Store.update（新addMessage）(
{/* ... */},
{onFailure:（）=>此操作。_handleMessageCreationRollback（）}
);
//乐观地增加计数
this.props.relay.setVariables({
numMessagesToShow:this.props.relay.variables.numMessagesToShow+1，
});
}
_handleMessageCreationRollback（）{
this.props.relay.setVariables({
numMessagesToShow:this.props.relay.variables.numMessagesToShow-1，
});
}

---

另请参见：

为了澄清，在变异后添加一条消息，您希望显示所有以前的消息以及新消息，对吗？在这种情况下，

setVariables（）

计数+1似乎是合理的。哪个“结束”闪烁？您是否指定了

键

属性，以便React不会从列表中删除项目？为了澄清，在变异后添加一条消息，您希望显示所有以前的消息加上新消息，对吗？在这种情况下，

setVariables（）

计数+1似乎合理。哪个“结束”闪烁？是否指定了

键

属性，以便React不会从列表中删除项目？