如何在React中实现Apollo Client缓存数据的静默重验证？

针对你需要先渲染缓存数据、后台静默更新的需求，有两种直接可行的实现方式：

方式一：利用cache-and-network Fetch Policy #

这是最简洁的方案，Apollo Client原生支持这种「先缓存、后后台更新」的行为：

import { useQuery, NetworkStatus } from '@apollo/client';
import YOUR_TARGET_QUERY from './queries/YourTargetQuery';

function TargetPage() {
  const { data, loading, networkStatus } = useQuery(YOUR_TARGET_QUERY, {
    fetchPolicy: 'cache-and-network',
    // 确保路由切换回此页面时，依然触发后台重验证
    nextFetchPolicy: 'cache-and-network',
  });

  // 仅在**首次无缓存**时显示加载状态，后台重验证时不干扰当前渲染
  const isInitialLoad = loading && networkStatus === NetworkStatus.loading;

  if (isInitialLoad) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 直接渲染缓存数据，后台请求完成后自动更新 */}
      {data?.targetResource && <div>{data.targetResource.content}</div>}
    </div>
  );
}

核心逻辑： #

• cache-and-network会立即返回缓存数据（如果存在），同时在后台发起网络请求
• 首次加载无缓存时，loading为true且networkStatus为loading，此时显示加载状态
• 已有缓存时，初始loading为false，后台请求期间networkStatus变为refetching但loading保持false，不会打断当前渲染
• 网络请求完成后，若返回数据与缓存不一致，Apollo会自动更新缓存和组件

方式二：手动触发后台重验证（按需控制时机） #

如果需要在特定场景（比如仅路由切换时）触发重验证，而非每次组件挂载都请求，可以结合路由监听和refetch实现：

import { useQuery } from '@apollo/client';
import { useLocation } from 'react-router-dom';
import YOUR_TARGET_QUERY from './queries/YourTargetQuery';

function TargetPage() {
  const location = useLocation();
  const { data, loading, refetch } = useQuery(YOUR_TARGET_QUERY, {
    fetchPolicy: 'cache-first', // 优先读取缓存
  });

  // 路由切换至当前页面时，触发后台重验证
  useEffect(() => {
    // 发起后台请求，无需等待结果，失败可自行捕获日志
    refetch().catch(err => console.error('重验证请求失败:', err));
  }, [location.pathname, refetch]);

  // 仅首次无缓存时显示加载
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {data?.targetResource && <div>{data.targetResource.content}</div>}
    </div>
  );
}

核心逻辑： #

• 初始用cache-first读取缓存，无缓存时才显示加载状态
• 借助useLocation监听路由变化，用户每次导航到该页面时调用refetch
• refetch在后台发起请求，不会将loading重置为true，因此当前缓存数据始终保持显示
• 请求完成后，数据有变化则自动更新缓存和组件

注意事项 #

• 确保你的Apollo Client缓存配置（如typePolicies）正确，这样Apollo能准确判断新旧数据是否一致，避免不必要的组件更新
• 根据业务需求调整重验证的触发时机，比如可以改为定时触发、按钮点击触发等

内容的提问来源于stack exchange，提问作者Daniel Don