使用react-query缓存API响应：路由切换不重复请求，刷新可重获数据

核心问题拆解 #

你要的效果是：路由切换时保留请求数据、不重复发起请求，页面刷新时重新拉取最新数据。之前踩的坑本质是没把缓存策略和组件挂载逻辑配合好——staleTime 能锁路由切换的缓存，但刷新时内存缓存清空就会空白；refreshInterval 是定时触发，管不了路由切换的缓存留存。

可行实现方案 #

1. 基础缓存配置（无需额外插件） #

给 useQuery 配置三个关键参数，就能满足需求：

• staleTime：设为 Infinity（或你需要的时长），让数据在路由切换时始终处于「新鲜」状态，不会触发重复请求
• refetchOnMount: true：页面刷新后组件重新挂载时，强制发起新请求
• 稳定的 queryKey：确保路由切换前后查询的缓存键一致，React Query 能正确识别并读取缓存

2. 关键代码修改示例 #

在你的 Home 组件里调整 useQuery 配置：

import { useQuery } from '@tanstack/react-query';

const fetchHomeData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  return res.json();
};

function Home() {
  const { data, isLoading } = useQuery({
    queryKey: ['homePageData'], // 固定查询键，保证缓存能被正确匹配
    queryFn: fetchHomeData,
    staleTime: Infinity, // 路由切换时永久复用缓存
    refetchOnMount: true, // 刷新页面/组件挂载时重新请求
    refetchOnWindowFocus: false, // 可选：避免窗口聚焦时自动请求
  });

  if (isLoading) return <div>加载中...</div>;
  return <div>首页数据：{JSON.stringify(data)}</div>;
}

3. 额外说明 #

• React Query 默认会在组件卸载后保留缓存（基于 cacheTime，默认5分钟），所以路由切走再切回时，会直接读取缓存，不会触发请求
• 如果需要刷新时先展示旧缓存再同步新数据，可以搭配 @tanstack/react-query-persist-client 做本地持久化，但记得要开启 refetchOnMount 保证刷新时能拿到最新数据

为什么之前的方案没生效？ #

• 用 staleTime 后刷新空白：因为页面刷新会清空内存缓存，没开 refetchOnMount 的话，组件挂载时会认为数据新鲜但缓存为空，直接显示空白
• refreshInterval 留不住路由切换数据：它是定时触发请求的机制，不是基于缓存的复用，路由切回时如果数据过期还是会重新请求

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