如何使用 Apollo Client 缓存嵌套对象？

Question

我正在使用 Contentful GraphQL API 来获取项目集合，在此示例中为足球俱乐部。

query Clubs($limit: Int!, $skip: Int!) {
    clubCollection(limit: $limit, skip: $skip) {
        total
        items {
            name
            description
        }
    }
}

响应的结构是：

clubCollection: {
  items: [{
    ... array of all the clubs
  }]
}

看起来 Apollo InMemoryCache 只在其 ROOT_QUERY 对象中缓存了完整的查询。但不是每个俱乐部。缓存的设置如下所示：

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        clubCollection: concatContentfulPagination()
      },
    },
  },
})

有谁知道我如何定位 items 中的俱乐部，以便我可以缓存每个俱乐部？

编辑： 感谢@xadm 的回答，我意识到我不需要像这样扩展 InMemoryCache：

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        clubCollection: {
          items: { 
          
          },
          ...concatContentfulPagination()
        }
      },
    },
  },
})

而是根据对象的类型将其添加到 typePolicies 的根目录中，对我来说是 Club。当我补充说它确实起作用了！

new InMemoryCache({
  typePolicies: {
    Club: {
      keyFields: ['name']
    },
    Query: {
      fields: {
        clubCollection: concatContentfulPagination()
      },
    },
  },
})

Answer 1

为此，您可以使用反应变量。这样您就可以在代码中的任何位置访问 clubs 数组，而无需重新运行查询并对其执行任何数组操作。访问 this 页面了解更多信息。

Answer 2

项目应该有一个 id prop 请求......要规范化 - Apollo 正在规范化缓存 GraphQL 客户端

需要正确缓存entries/types/subtypes。

https://graphql.org/learn/caching/

它，唯一键可以是 id、_id 或使用 typePolicies - customizing-identifier-generation-by-type.

的每种类型的自定义键

https://www.apollographql.com/docs/react/caching/cache-configuration/#default-identifier-generation

在这种情况下（项目内没有可查询的 id 道具），您应该签入 API （docs/specs/schema 或探索网络响应正文 - __typename 道具 items 对象）俱乐部项目条目的类型（可能 Club）并自定义缓存策略，如：

new InMemoryCache({
  typePolicies: {
    Club: {
      keyFields: ['name']
    },

...假设 name 是唯一的。

如何使用 Apollo Client 缓存嵌套对象？

How can I cache nested objects with Apollo Client?

apollo

reactjs

contentful

graphql

apollo-client