vue.js - 从 apollo 缓存读取查询,查询尚不存在,但所有信息都已存储在缓存中
问题描述
我有一个 graphql 端点,可以在其中输入此查询:
fragment ChildParts {
id
__typename
}
fragment ParentParts {
__typename
id
children {
edges{
node {
...ChildParts
}
}
}
query {
parents {
edges
nodes {
...ParentParts
}
}
}
}
执行时,它返回如下内容:
"data": {
"edges": [
"node": {
"id": "<some id for parent>",
"__typename": "ParentNode",
"children": {
"edges": [
node: {
"id": "<some id for child>",
"__typename": "ChildNode"
},
...
]
}
},
...
]
}
现在,使用 apollo 客户端,在突变后,我可以从缓存中读取此查询,并更新/添加/删除任何 ParentNode 以及任何 ChildNode,但我必须检查此查询返回的结构。
现在,我正在寻找一种从缓存中获取 ChildNode 列表的可能性(其中已经有这些,因为缓存是作为平面列表创建的),以使嵌套数据的更新更容易一些。是否有可能从缓存中读取查询,而之前没有从服务器读取相同的查询?
解决方案
您可以使用客户端的readFragment
方法从缓存中检索任何一个单独的项目。这只需要 id 和一个片段字符串。
const todo = client.readFragment({
id,
fragment: gql`
fragment fooFragment on Foo {
id
bar
qax
}
`,
})
请注意,id
这里是 dataIdFromObject 函数返回的缓存键——如果您没有指定自定义函数,那么(假设存在 __typename 和 id 或 _id 字段)默认实现只是:
${result.__typename}:${result.id || result._id}
如果您提供了自己的 dataIdFromObject 函数,则需要提供该函数返回的任何 id。
正如@Herku 指出的那样,根据用例,还可以使用缓存重定向在解析另一个查询时利用为一个查询缓存的数据。这被配置为设置您的一部分InMemoryCache
:
const cache = new InMemoryCache({
cacheRedirects: {
Query: {
book: (_, args, { getCacheKey }) =>
getCacheKey({ __typename: 'Book', id: args.id })
},
},
})
不幸的是,在撰写此答案时,我不相信有任何方法可以通过 id 删除缓存的项目。关于这一点,这里正在进行讨论(这里的原始问题)。
推荐阅读
- asp.net-mvc - 如何使用 c# 调试 asp .net 的多线程应用程序?
- angular - Angular : How to map angular reative formcontrols with entity properties of Web API
- java - assertJ findFrame() 失败并出现 NoClassDefFoundError
- javascript - 无法可视化 d3.js 为 jupyter notebook 中的 networkx 图创建的图。正在创建“graph.json”文件,但没有出现任何视觉效果
- pdf - 使用 pdf 注释创建 React Native App 并登录 PDF 功能
- php - 获取公共 ip 不是私有的
- laravel - 使用 Laravel 请求在更新方法上传递空字段
- bluetooth-lowenergy - 低功耗蓝牙中的服务请求广告数据
- snmp - 打印机 OID 不适用于每台打印机
- elasticsearch - 与本地卷一起使用时出现错误“未知字段 hostPath”Kubernetes Elasticsearch