Apollo/GraphQL发生突变后，如何更新缓存

Question

首先，感谢您花时间通读本文。

我尝试过基于几种方法在突变后更新缓存。

起初，我考虑使用上下文，但当我阅读文档时，我意识到Apollo没有必要使用这种方法，因为状态存储在缓存中。

我一直在探索这些文档：进行所有其他缓存更新；在突变之后更新缓存；突变后自动更新Apollo缓存；突变后更新客户端缓存

我倾向于第一个链接中提到的方法，因为它是官方文档。

我有一些问题：

1. 我是不是错过了一些基本的东西
2. 这是一个简单的bug吗？就像某个地方提到的错误变量
3. 我需要在某个地方查询GET_LINKS吗

以下是供参考的代码块：

const [createLink] = useMutation(CREATE_LINK);
function handleSubmit(e) {
e.preventDefault();
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
},
update(cache, { data: { createLink } }) {
console.log(cache);
cache.modify({
fields: {
links(allLinks = []) {
const newLinkRef = cache.writeFragment({
data: createLink,
fragment: gql`
fragment NewLink on Link {
id
slug
description
link
shortLink
}
`
});
return [...allLinks, newLinkRef];
}
}
});
}
});
setState({
slug: "",
description: "",
link: ""
});
}

以下是完整的代码库供参考：codesandbox.io

Answer 1

感谢xadm的想法。我最终使用了update。我将更新代码块从handleSubmit函数移到了useMutation函数中。

工作代码块：

const [createLink] = useMutation(CREATE_LINK, {
update(cache, { data: { createLink } }) {
debugger;
cache.modify({
fields: {
allLinks(existingLinks = []) {
const newLinkRef = cache.writeFragment({
data: createLink,
fragment: gql`
fragment NewLink on Link {
id
slug
description
link
}
`
});
return [...existingLinks, newLinkRef];
}
}
});
}
});
function handleSubmit(e) {
e.preventDefault();
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
}
});
setState({
slug: "",
description: "",
link: ""
});
}