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

我正在使用Apollo本地内存缓存来管理我的应用程序的状态。在我的缓存中有一个名为

Clips

的数组。在我的应用程序中的某个地方，我需要浏览剪辑列表并对其上的数据进行变异。我可以这样做：

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

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

---

React依赖于浅层比较diff并重新呈现UI

变异数组元素不会更改数组变量的内存地址，因此react不会知道数组已更改，因为数组的元素已更改，检查每个元素是否已更改可能会变得昂贵，因此必须使用数组中的新元素提供一个新数组，以使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

的形状，而不是client.writeData，请使用client.writeQuery-->，这将确保重新渲染正确进行。

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