Apollo 客户端 - 子类型的缓存重定向答案

【问题标题】：Apollo Client - Cache Redirects for sub-typesApollo 客户端 - 子类型的缓存重定向
【发布时间】：2023-03-27 04:06:01
【问题描述】：

我在生产环境中使用 Apollo 大约一年了，我正在尝试优化我的缓存管理。让我们想象一下以下虚构的简单模式：

type Query {
  allBooks: [Book]
  allCups: [Cup]
  allColors: [Color]
}

type Book {
  id: Int
  name: String
  cover_color_id: Int
  CoverColor: Color
}

type Cup {
  id: Int
  name: String
  cover_color_id: Int
  CoverColor: Color
}

type Color {
  id: Int
  name: String
  hex_code: String
}

我想配置 cacheRedirects 以便当我需要 Book.CoverColor 或 Cup.CoverColor 时（例如通过 allBooks ）；在向服务器请求它之前，它将首先在缓存中查找具有匹配 ID 的颜色。这可能吗？

提前致谢！

PS：我试过了，好像不行：

cacheRedirects: {
  Query: {
    // Stuff that perfectly works
  },
  Book: {
    // this is not even executed :(
    CoverColor: (book, args, { getCacheKey }) => {
      return getCacheKey({
        __typename: 'Color',
        id: book.cover_color_id
      })
    }
  }
}

【问题讨论】：

标签： graphql apollo apollo-client vue-apollo

【解决方案1】：

这取决于您的查询是什么样的。

如果您的 allBooks 重定向返回 id 列表并且您的查询启用了 returnPartialData，它应该可以工作。

如果您在不点击重定向的情况下查询allBooks，那么如果[Book] 的每个元素已经包含所有数据，那么阿波罗就没有理由使用缓存字段

查询一本书，它应该可以按预期工作。

type Query {
  allBooks: [Book]
  allCups: [Cup]
  allColors: [Color]
  book(id: Int): Book
}

const cacheRedirects: CacheResolverMap = {
  Query: {
    book: (_, args, { getCacheKey }) =>
      getCacheKey({ __typename: 'Book', id: `${args.id}` }),
  },
  Book: {
    CoverColor: (book, args, { getCacheKey }) => {
      return getCacheKey({
        __typename: 'Color',
        id: book.cover_color_id,
      })
    },
  },
}

【讨论】：