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

Posted 2023-03-08

【中文标题】反应阿波罗突变和乐观更新

【英文标题】：React apollo mutation and optimistic updates

【发布时间】：2019-02-08 03:48:42

【问题描述】：

我正在使用带有突变的 graphql HOC 输入类型为 checkbox。我还为它添加了乐观的 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)

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

【参考方案1】：

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

1) 将中断 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 作为破解选项。