时间戳

首页 > 解决方案 > 为特定列表/数组索引更新 Apollo 本地缓存

graphql - 为特定列表/数组索引更新 Apollo 本地缓存

问题描述

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

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

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

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

标签： graphqlapolloreact-apolloapollo-client

解决方案

React 依赖浅层比较来区分和重新渲染 UI。

改变数组元素不会改变数组变量的内存地址，所以反应不会知道数组已经改变，因为数组的元素已经改变，检查每个元素已经改变可能会变得很昂贵，所以你必须给一个新的数组与数组中的新元素进行反应重新渲染。

因为 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

推荐阅读