如何阻止react-query重复请求已缓存的日期范围数据？

问题根源在于React Query的默认缓存策略：它的staleTime默认值为0，这意味着缓存数据一旦就绪就会被标记为"过时（stale）"。当你切回之前的日期范围时，组件会立刻读取缓存数据，但React Query会自动在后台发起重新请求来更新"过时"的缓存，这就是你看到重复请求的原因。

要彻底避免重复请求已缓存的数据，只需给useQuery添加合适的staleTime配置：

方案1：永久保留缓存（适合数据不会频繁变更的场景） #

将staleTime设为Infinity，这样缓存的数据永远不会被标记为过时，也就不会自动触发后台重新请求：

const { data, isFetching} = useQuery({
    queryKey: ["key1", startDate, endDate],
    queryFn: () => getData(startDate, endDate),
    initialData: [],
    staleTime: Infinity, // 关键配置
});

方案2：设置缓存有效期（适合数据定期更新的场景） #

如果你的数据可能在一段时间后过期，可以设置具体的毫秒数，比如5分钟（300000毫秒）：

const { data, isFetching} = useQuery({
    queryKey: ["key1", startDate, endDate],
    queryFn: () => getData(startDate, endDate),
    initialData: [],
    staleTime: 300000, // 5分钟内不会自动重新请求
});

额外补充 #

• 如果之后需要手动刷新某一日期范围的数据，可以调用refetch方法，或者用queryClient.invalidateQueries(["key1", startDate, endDate])主动标记缓存为过时并触发请求。
• isFetching会在后台请求时也返回true，如果只想在首次加载或无缓存时显示加载状态，可以改用isLoading（仅在无缓存且正在请求时为true）。

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