如何阻止TanStack useQuery返回缓存结果时重复发起数据请求？

问题根源 #

TanStack Query（原React Query）默认的staleTime值为0，这意味着缓存数据一旦存入就会被标记为“过时”。哪怕你已经设置了refetchOnMount: false和refetchOnWindowFocus: false，当切换查询键（比如在“铅”和“金”之间来回切换）时，由于缓存数据处于过时状态，useQuery仍会自动发起新请求，同时先返回缓存数据，最终用新请求结果覆盖原有内容。

解决方案 #

针对你这种“数据不会快速变化或修改”的场景，只需调整两个核心配置项即可彻底避免冗余请求：

1. 强制缓存永久新鲜 #

将staleTime设为Infinity，让缓存数据永远保持“新鲜”状态，这样useQuery就不会因为数据过时而触发自动重新请求：

const { data, isLoading } = useQuery({
  queryKey: ['element', selectedElement],
  queryFn: () => fetchElement(selectedElement),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  staleTime: Infinity, // 核心配置：缓存永不失效
});

2. 可选：永久保留缓存（按需） #

如果你的查询键切换频率不高，还可以将cacheTime也设为Infinity，确保未被使用的缓存不会被自动回收：

cacheTime: Infinity, // 可选：缓存永久保留，不会被垃圾回收

效果验证 #

修改配置后：

• 首次查询某一元素时，会正常发起请求并缓存数据
• 后续切换回已查询过的元素时，直接读取缓存数据，不会再触发API请求，也就不会出现“先显示旧缓存再被新请求覆盖”的现象

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