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

Question

我正在使用带有突变的 graphqlHOC，用于输入类型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

可能有更好的选择，但这里有 2

个我想出的：1( 将中断值=真和值=假更改为单独的函数。这样，您的乐观响应和真正的更新函数都会执行相同的操作。它们都会调用 value=true 或 value=false。

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

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

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