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

Question

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

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

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

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

Answer 1

React依靠浅表比较来比较并重新呈现UI。

更改数组元素不会更改数组变量的内存地址，因此react不会知道数组已更改，因为array的元素已更改，检查每个元素是否更改可能会变得很昂贵，因此您必须给出一个新数组，该数组中有新元素以使反应重新渲染。

对于阿波罗无法直接做到，但是您可以读取缓存并将其合并回去

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 }});