reactjs - 在 Apollo / GraphQL 中发生突变后如何更新缓存?
问题描述
首先,感谢您花时间阅读本文。
我尝试根据几种方法在突变后更新缓存。
起初,我在考虑使用上下文,但是当我阅读文档时,我意识到这种方法对于 Apollo 来说是不必要的,因为状态存储在缓存中。
我一直在探索这些文档:进行 所有其他缓存更新;突变后更新缓存;突变后自动更新 Apollo 缓存;突变后更新客户端缓存
我倾向于第一个链接中提到的方法,因为它是官方文档。
我有一些问题:
- 我错过了一些基本的东西吗?
- 这是一个简单的错误吗?就像某处提到的错误变量一样。
- 我需要在某处查询 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
解决方案
谢谢 xadm 的想法。我最终使用了update
. 我将更新代码块移到useMutation
函数之外handleSubmit
。
工作代码块:
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: ""
});
}
推荐阅读
- python - 计算每个 ID Pandas 的每行日期范围内有多少行日期
- javascript - 不允许下拉显示全文
- ruby-on-rails - 一次创建可变数量的新 ActiveRecord 记录 Rails
- python - 在 Python dict 中为变量分配 True 元素的键名?
- java - Spring security - 实现 oauth2 sso
- cakephp-2.0 - 动态下拉菜单和保存 cakephp 代码不能一起工作
- android-studio - 如何设置限制以在 kotlinlang 中编辑文本限制
- apache-calcite - Apache Arrow 适配器与 Apache Calcite 集成
- vb6 - 从 VB6 调用 C++ DLL 传递垃圾数据作为参数?
- php - Ajax 请求不会只更新登录用户