反应阿波罗突变和乐观更新

Question

我正在为checkbox的输入类型使用带突变的graphql HOC。我还为它添加了乐观UI更新选项。选中该框将触发value=true的突变，取消选中将触发value=false的突变。

但问题是，快速点击会导致对服务器的多次突变调用，并且响应存在延迟。同时，optimisticResponse update完成它的工作并切换复选框。当服务器响应到达时，会再次调用更新函数，并切换复选框，从而导致UI出现毛刺。

让我总结一下我可以预料到的流程

点击顺序：

Check => Uncheck => Check

UI更新的顺序：

Check(optimistic response) => Uncheck(optimistic response) => Check(server response) => Check(Optimistic response) => Uncheck(server response) => Check(server response)

有没有办法消除这些小故障？

Answer 1

可能还有更好的选择，但这里有两个我想出来的：

1)将break value=true和value=false修改为单独的函数。这样，您的乐观响应和真正的更新函数将执行相同的操作。它们都会调用value=true或value=false。

2)对于您的乐观响应，您可以添加一个额外的参数optimistic=true。然后，在update函数中，您可以检查乐观是否为true。如果是，请继续进行更新。在此检查之后，您可以检查突变的响应。如果突变返回错误，则重新设置该值。如果不返回错误，则不执行任何操作。

if(optimistic) {
  setValue(); // Sets it to optimistic result
  return;
}
if(response returns error) {
  setValue(); // Returns it back to original state
  return
}

在我看来，更好的选择是使用1，但如果这是不可能的，您可以使用2作为黑客选项。