react-query是否支持根据服务器Cache-Control头自动设置缓存时间？

React Query 默认不会自动识别并应用服务器返回的 Cache-Control 响应头来设置 staleTime 或 cacheTime，这两个核心缓存配置默认需要手动硬编码。

核心原因 #

React Query 的缓存体系是独立于浏览器 HTTP 缓存的客户端侧缓存机制：

• staleTime 控制数据从“新鲜”变为“过时”的时长，过时后会触发后台静默重新请求
• cacheTime 控制数据在内存缓存中保留的时长，超时后会被垃圾回收

这两个配置的设计目标是让开发者完全掌控前端缓存策略，和服务器返回的 HTTP 缓存头（针对浏览器 HTTP 缓存）定位不同，因此官方没有内置自动解析 Cache-Control 的逻辑。

手动实现基于响应头的动态配置 #

如果想要根据服务器返回的 Cache-Control（比如 max-age）来动态设置缓存时长，可以在 queryFn 中手动解析响应头，再将值传入 useQuery 的配置项：

const fetchWithCacheHeader = async () => {
  const response = await fetch('/api/your-data');
  
  // 解析 Cache-Control 中的 max-age 值
  const cacheControlHeader = response.headers.get('Cache-Control');
  const maxAgeMatch = cacheControlHeader?.match(/max-age=(\d+)/);
  // 转换为毫秒，默认60秒
  const calculatedMaxAge = maxAgeMatch ? parseInt(maxAgeMatch[1], 10) * 1000 : 60000;

  const data = await response.json();
  // 返回数据和解析后的缓存时长
  return { data, maxAge: calculatedMaxAge };
};

// 在 useQuery 中动态设置 staleTime 和 cacheTime
const { data } = useQuery(['your-data-key'], fetchWithCacheHeader, {
  staleTime: () => {
    // 从缓存数据中获取解析后的 maxAge
    const cachedData = queryClient.getQueryData(['your-data-key']);
    return cachedData?.maxAge || 60000;
  },
  // 可以根据需求设置 cacheTime，比如设为 maxAge 的2倍
  cacheTime: () => {
    const cachedData = queryClient.getQueryData(['your-data-key']);
    return cachedData?.maxAge * 2 || 120000;
  }
});

注意事项 #

• 第一次请求时，queryClient.getQueryData 可能返回 undefined，所以必须设置默认值兜底
• 如果服务器返回的 Cache-Control 包含其他指令（比如 no-cache、must-revalidate），需要根据业务需求额外处理逻辑

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