为特定 list/array 索引更新 Apollo 本地缓存

Question

我正在使用 Apollo 本地内存缓存来管理我的应用程序状态。在我的缓存中，我有一个名为 Clips 的数组。在我的应用程序中的某个地方，我需要浏览剪辑列表并改变它们的数据。我可以这样做：

const client = useApolloClient();
client.writeData({ data: { clips: mutatedClipsArray }});

但是有没有一种方法可以只为 clips 数组的特定索引写入数据？像这样的东西（不起作用）：

client.writeData({ data: { clips[2]: mutatedClip2 }});

Answer 1

React 依赖浅层比较来比较差异并重新渲染 UI。

改变数组元素不会改变数组变量的内存地址，所以反应不会知道数组已经改变，因为数组的元素已经改变，检查每个元素是否改变会变得昂贵，所以你必须提供一个包含数组中新元素的新数组，才能使 React 重新渲染。

apollo不能直接做，但是可以读取缓存合并回来

const currentClips = readQuery({ query: QUERY, variables })
currentClips.data.clips[2] = newClip;
client.writeData({ data: { clips: currentClips.data.clips }});

但是 React 不太可能重新正确渲染，所以这可能更好：

const currentClips = readQuery({ query: QUERY, variables })
const newClips = [...currentClips.data.clips]; make a copy
newClips[2] = newClip;
client.writeData({ data: { clips: newClips }});

** 以上只是示例代码，您可能需要验证 currentClips

的形状

为特定 list/array 索引更新 Apollo 本地缓存

Updating Apollo local cache for a specific list/array index

apollo

graphql

react-apollo

apollo-client