javascript - Apollo GraphQL 合并缓存数据
问题描述
我有一个由 2 个组件组成的页面,每个组件都有自己的数据请求,例如
<MovieInfo movieId={queryParamsId}/>
const GET_MOVIE_INFO = `gql
query($id: String!){
movie(id: $id){
name
description
}
}`
下一个组件
<MovieActors movieId={queryParamsId}/>
const GET_MOVIE_ACTORS = `gql
query($id: String!){
movie(id: $id){
actors
}
}`
对于这些查询中的每一个,我都使用 apollo hook
const { 数据,加载,错误 } = useQuery(GET_DATA, {variable: {id: queryParamsId}}))
一切都很好,但我收到一条警告消息:
替换 Query 对象的电影字段时,缓存数据可能会丢失。为了解决这个问题(这不是 Apollo Client 中的错误),要么确保所有 Movie 类型的对象都有 ID,要么为 Query.movie 字段定义自定义合并函数,以便 InMemoryCache 可以安全地合并这些对象: { ... }
它可以与 google chrome 一起使用,但此错误会影响 Safari 浏览器。一切都令人崩溃。我 100% 确定这是因为这个警告信息。在第一个请求中,我在缓存中设置了电影数据,在对同一查询的第二个请求中,我只是将旧数据替换为新数据,因此之前的缓存数据是未定义的。我该如何解决这个问题?
解决方案
这是 Thomas 提到的相同解决方案,但要短一些
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
YOUR_FIELD: {
// shorthand
merge: true,
},
},
},
},
});
这与以下相同
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
YOUR_FIELD: {
merge(existing, incoming, { mergeObjects }) {
return mergeObjects(existing, incoming);
},
},
},
},
},
});
推荐阅读
- asp.net - 使用 FluentMigrator 部署数据库
- json - 解码 JSON:'InternalLinkedHashMap
' 不是类型 'List 的子类型 ' - java - 文件夹路径/距离
- javascript - 编译示例 Solidity Farm 项目以在本地或服务器上进行测试
- json - 从连接数据集构建主从 JSON
- google-sheets-api - 在电子表格中结合 valueRenderOptions.values.get
- javascript - Docker(错误:数据库未初始化且未指定超级用户密码)即使在 docker-compose.yml 文件中设置了密码和 db
- vuejs2 - VueJS2:如何提取数组的一个属性并使用它在第二个数组中查找匹配值?
- workitem - Azure Dev Ops - 如何通过日期更改获取工作项的完整历史记录
- node.js - 在不同端口上运行的从前端到后端的 Api 调用