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

【问题标题】：How can I cache nested objects with Apollo Client?如何使用 Apollo Client 缓存嵌套对象？
【发布时间】：2021-06-10 08:29:50
【问题描述】：

我正在使用 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()
      },
    },
  },
})

【问题讨论】：

标签： reactjs graphql apollo apollo-client contentful

【解决方案1】：

项目应该有一个 id 请求的道具...进行规范化 - Apollo 正在规范化缓存 GraphQL 客户端

需要正确缓存条目/类型/子类型。

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 是唯一的。

【讨论】：

感谢您的回答。我知道该对象需要一个 ID，不幸的是 Contentful 对象的 id 位于更深的嵌套对象中：graphql clubCollection(limit: $limit, skip: $skip) { total items { sys: { id } name description } } 所以也许我的问题是错误的......问题是，我怎样才能访问俱乐部的数组带有 typePolicies 的项目来设置字段 name 例如为 keyFields?
您应该会在缓存中看到各个项目条目...您可以使用缓存 API (readFragment) 来读取它们... '我如何访问俱乐部数组' ? items 数组是响应类型的道具（查询返回一些类型的项目？未知？检查网络响应详细信息中的__typename？检查 api/specs，（无 id，未规范化）
再次感谢！我用我认为的解决方案编辑了原始帖子。这真的是你试图告诉我的吗？ :-)

【解决方案2】：

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

【讨论】：