React Query如何在获取有效响应前保留缓存数据？

我遇到一个问题：当后端服务宕机时，我的应用会移除缓存中的成功响应并返回404错误。目前cache和revalidate的时间设置相同，我需要将请求数据缓存至获取到新的成功（即HTTP 200）响应为止。React Query提供了cache time和revalidate time配置项，我想知道是否可以将cache time设置为无限，同时保持revalidate time为常规的10分钟？

完全可以这么配置，这正是React Query缓存机制支持的场景，下面是具体的实现逻辑和注意事项：

核心配置逻辑 #

React Query中cacheTime控制未被活跃订阅的缓存数据保留时长，而staleTime（你提到的"revalidate time"更准确的对应项）控制数据多久后被标记为"陈旧"，触发自动重新请求。

• 将cacheTime设为Infinity：缓存的成功响应永远不会被自动清理，除非你手动调用清理API。
• 将staleTime设为10 * 60 * 1000（10分钟）：数据在10分钟内视为"新鲜"，不会自动重新请求；超过10分钟后，React Query会在挂载组件、窗口聚焦等时机尝试重新拉取最新数据。

关键行为说明 #

当后端宕机返回404时：

1. React Query会保留原有的缓存成功数据（因为cacheTime无限）
2. 请求标记为失败，你可以通过isError状态展示错误提示，但页面依然能渲染缓存的旧数据
3. 后端恢复并返回200响应后，缓存会自动更新为最新数据

示例代码 #

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

const fetchData = async () => {
  const res = await fetch('/api/your-data');
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

const useYourData = () => {
  return useQuery({
    queryKey: ['yourDataKey'],
    queryFn: fetchData,
    cacheTime: Infinity, // 无限保留缓存
    staleTime: 10 * 60 * 1000, // 10分钟后数据变陈旧
    // 以下为默认开启的自动重连/重请求配置，可根据需求调整
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    refetchOnReconnect: true,
  });
};

注意点 #

• 不要混淆staleTime和refetchInterval：如果你需要定时强制重新请求（不管数据是否新鲜），可以额外设置refetchInterval: 10 * 60 * 1000，但通常staleTime结合自动重请求逻辑就足够满足需求。
• 手动清理缓存：如果需要在特定场景下主动清除缓存，可调用queryClient.removeQueries('yourDataKey')，不会影响全局无限缓存的策略。

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