Question

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

但是问题是快速单击会导致对服务器的多个突变调用，并且响应中存在延迟。同时，optimisticResponse更新会执行其工作并切换复选框。当服务器响应到达时，更新功能将再次被调用，并会切换复选框，从而导致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。然后，在更新功能中，您可以检查看是否乐观。如果是，请继续进行更新。完成此检查后，您便可以检查突变的响应。如果变异返回错误，请将该值重新设置。如果它没有返回错误，则什么也不做。

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

我认为，更好的选择是将1设为最佳，但如果不可能，则可以将2用作被黑的选项。

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

1 个答案: