Apollo GraphQL 合并缓存数据

Question

我有一个由 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，{变量：{id：queryParamsId}}））

一切都很好，但我收到一条警告消息：

替换 Query 对象的电影字段时，缓存数据可能会丢失。要解决此问题（这不是 Apollo Client 中的错误），请确保所有 Movie 类型的对象都具有 ID，或者为 Query.movie 字段定义自定义合并函数，以便 InMemoryCache 可以安全地合并这些对象：{ … }

它适用于谷歌浏览器，但此错误会影响 Safari 浏览器。一切都令人崩溃。我 100% 确定这是因为这条警告消息。在第一个请求中，我在缓存中设置了电影数据，在对同一查询的第二次请求中，我只是用新数据替换旧数据，因此以前缓存的数据是未定义的。我该如何解决这个问题？

原文由 Thomas Rositsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决了！

  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          YOUR_FIELD: {
            merge(existing = [], incoming: any) {
              return { ...existing, ...incoming };
              // this part of code is depends what you actually need to do, in my
              case i had to save my incoming data as single object in cache
            }
          }
        }
      }
    }
  })
});

原文由 Thomas Rositsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是 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);
          },
        },
      },
    },
  },
});

原文由 Zeeyed 发布，翻译遵循 CC BY-SA 4.0 许可协议