GraphQL/Apollo 客戶端：如果查詢是先前查詢的子集，則從緩存中獲取數據

Question

我是 GraphQL 的新手，我認為它會自動執行此操作。

例如，如果我獲取帖子列表，然后打開單個帖子，則該帖子的數據已經在 memory 中。 我希望 GraphQL 能夠重新使用緩存中的數據，但它會發出另一個網絡請求。

架構類似於：

  type Query {
    posts: [Post]
    post(id: ID): Post
  }

我正在使用反應。 在PostsRoute中，我有：

  useQuery(gql`
    query {
      posts {
        id
        title
      }
    }
  `);

在PostRoute ，我有：

  useQuery(gql`
    query {
      post(id: ${postId}) {
        id
        title
      }
    }
  `);

我需要為 Apollo 配置什么來自動使用緩存的數據嗎？ 或者這是 Apollo 默認不支持的東西？

Answer 1

阿波羅 2 號

如果您使用的是 Apollo 2，那么您正在尋找的可能是cacheRedirects 。 它用於攔截查詢並使用緩存解決它。 鏈接的文檔實際上准確地解釋了您的用例，因此我建議您查看它，但為了后代，這是我個人的做法（適應您的情況）。

在實例化它時，在InMemoryCache選項中，添加一個cacheRedirects字段並為您的post查詢指定一個自定義解析器，如下所示：

const cache = new InMemoryCache({
  cacheRedirects: {
    Query: {
      post: (_, {id}, {getCacheKey}) => getCacheKey({__typename: "Post", id}),
    },
  },
});

這假設您的帖子的__typename是Post 。 自定義解析器的第一個參數是ROOT_QUERY的結果，我們在這里不使用它。 第二個參數是傳遞給查詢的 arguments （此處為{id: "some_id"} ），第三個參數是上下文，包含client 、 cache和getCacheKey 。 這里只有getCacheKey對我們有用。 該方法采用__typename和id ，並在緩存中返回其鍵。

這樣就完成了自定義解析器。 現在，當您查詢post(id: some_id)時，它將查看自定義解析器，接收緩存鍵並從緩存中返回與該鍵匹配的結果。

阿波羅 3 號

cacheRedirects在 Apollo 3 中已被移除，但同樣的功能可以通過field policies來實現。 實例化InMemoryCache時仍然需要進行設置，但略有不同：

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        post: (_, {args, toReference}) => toReference({__typename: "Post", id: args.id}),
      },
    },
  },
});

我們在Query類型的字段post上定義了一個字段策略。 請注意，第二個參數現在包括args和輔助實用程序。 這包括toReference ，這基本上是新的getCacheKey 。