reactjs - Apollo 客户端乐观更新是否更改每个列表项的引用？

Question

我有父组件 一个 我从哪里获取 TODO 列表 (假设有 10 个项目) ，然后映射这个数组并将整个对象传递给组件 乙 .

组件 乙 有一个 备忘录 要比较的包装器 待办事项对象引用仅重新渲染更新的组件。喜欢:

export default memo(ComponentB, (prevProps, nextProps) => {  
 return prevProps.TODO === nextProps.TODO
})

来自组件 乙 在按钮上单击调用 useMutation 在列表中添加一项。我提供了 乐观回复 和 更新 功能如上 Apollo doc

一切正常，除了:当我添加 时乐观回复 用于快速 UI 更改和登录组件 乙 ，我看到每个列表项都在重新渲染，但是 万一我离开 更新 没有 的功能乐观回复 然后我看到只有一个项目被重新渲染。

所以我的问题是，这是如何 阿波罗款待 乐观回复 更新或者我应该继续在我的代码中寻找一些问题，我已经在尝试计算小时数了:/
我只是找不到任何 Material 来指出这个特殊情况，如果有人知道答案，也许可以分享链接或小建议。谢谢!

Answer 1

乐观响应提交给缓存，因此您的逻辑将“认为”数据已更新。服务器响应后，恢复缓存并应用真实数据。因此，实际上，当您可能预期只有 1 个更新时，您将体验 2 个更新。
除此之外，我相信您是在说您为每个“TODO”项目渲染了一个组件。 AKA，您没有将数组传递给单个组件。这听起来是正确的方法，只要确保这就是你所拥有的。那么为什么他们都更新呢？似乎您无需担心此问题的阿波罗代码。我认为第一步是改变线路，

return prevProps.TODO === nextProps.TODO

是一个不依赖于引用的比较。相反，最简单的快速更改是 TODO 上是否有一些字符串 ID 字段。在那种情况下，你可以这样做，

return prevProps.TODO.id === nextProps.TODO.id

这样您就不必担心 apollo 是返回相同的引用还是返回具有相同数据的新对象。如果这不能解决问题，请在评论中告诉我，我们可以继续寻找。