Apollo分页查询使用了缓存，但仍然从服务器获取数据（尽管查询变量的缓存已存在）

这个问题的原因在于Apollo客户端默认情况下只缓存完整的查询结果数据，而不是缓存查询的变量参数。因此，即使您从缓存中获取了数据，客户端仍然需要从服务器获取数据来填充变量参数。

要解决这个问题，需要使用Apollo缓存的一些高级技巧。具体来说，您需要为每个查询添加唯一的查询标识符（query identifier），并使用它来有效地缓存查询变量。以下是一个示例查询：

query ProductList($first: Int!, $after: String) @cacheControl(maxAge: 300) {
  products(first: $first, after: $after) {
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      cursor
      node {
        id
        name
        price
      }
    }
  }
}

在这个查询中，我们可以看到@cacheControl指令用来定义查询结果的缓存策略。而在查询的本体中，我们定义了两个带有值的变量（first和after）。为了缓存这个查询，我们需要为每个查询创建唯一的标识符。例如：我们可以使用查询名称、查询哈希或任何其他唯一标识符，来标识每个查询。

import { ApolloClient, gql } from '@apollo/client'

const QUERY_NAME = 'ProductList'
const QUERY_HASH = '7ccc9de839678350d2c0cb25382b77e0'

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: '/graphql',
  queryDeduplication: false,
  defaultOptions: {
    // 默认情况下，设置每个查询的缓存key
    watchQuery: {
      fetchPolicy: 'cache-and-network',
      nextFetchPolicy