如何在不请求服务器的情况下获取GraphQL缓存数据条数

嗨，我来帮你搞定这个需求！要在不发起服务器请求的前提下读取Apollo缓存里的电影条数，你可以用Apollo Client提供的readQuery方法——它会直接从本地缓存取数据，完全不会触发网络请求。下面是具体的实现方案：

核心实现：用useApolloClient读取缓存 #

首先要获取Apollo Client的实例，然后通过readQuery读取你的电影查询数据，最后统计条数即可。

完整代码示例 #

import { Query, useApolloClient } from 'react-apollo'; // 若使用新版@apollo/client，替换为@apollo/client导入
import { QUERY } from './your-query-file'; // 导入你的电影列表查询

const MovieListContainer = () => {
  // 获取Apollo Client实例
  const client = useApolloClient();

  // 定义获取缓存电影条数的工具函数
  const getCachedMovieCount = () => {
    try {
      // 直接从缓存读取查询结果，无网络请求
      const data = client.readQuery({ query: QUERY });
      // 返回条数，无数据时返回0
      return data?.movies?.length || 0;
    } catch (error) {
      // 缓存中无对应数据时readQuery会抛错，这里返回0作为默认值
      return 0;
    }
  };

  // 在组件中获取当前缓存的电影条数
  const cachedMovieCount = getCachedMovieCount();

  return (
    <div>
      {/* 展示缓存中的电影条数 */}
      <p>缓存中已有电影：{cachedMovieCount} 条</p>
      
      {/* 原有的Query组件，负责展示列表（必要时请求服务器） */}
      <Query query={QUERY}>
        { ({ loading, error, data }) => {
          if (loading) return (<p>Loading...</p>)
          if (error && !data) return (<p>Error...</p>)
          return <MovieList movies={ data.movies } />
        } }
      </Query>
    </div>
  )
}

关键细节说明 #

• readQuery是官方推荐的缓存读取方法，它会严格匹配你传入的查询（如果查询带变量，也要同步传入对应变量参数）。
• 若缓存中还没有该查询的结果，readQuery会抛出错误，所以我们用try/catch捕获这种场景，返回0作为兜底值。
• 整个过程完全不会发起网络请求，只会读取本地缓存数据，完美契合你的需求。

内容的提问来源于stack exchange，提问作者Mark Hildreth