设置staleTime为Infinity后React Query仍自动重取问题排查

问题代码与现象 #

我在React Query v4里写了这个查询钩子：

export const useAllUsers = () =>
  useQuery<UserResponseDto[]>({
    queryKey: [QueryClientKeys.GET_ALL_USERS],
    queryFn: async () => {
      const response = await http.get<
        UserResponseDto[],
        AxiosResponse<UserResponseDto[]>
      >(`${API_BASE}/api/user/all`);
      return response.data;
    },
    staleTime: Infinity,
  });

遇到的问题：第一次进页面能正常获取用户数据，离开页面（钩子卸载）后过5分钟再回来，查询会自动重新请求。明明设置了staleTime: Infinity，为啥还会重取？我把cacheTime改成Infinity后问题解决了，这么做对吗？

核心原因：staleTime 和 cacheTime 的区别 #

别搞混这两个配置的作用：

• staleTime：管数据什么时候变"过期"。设为Infinity就是说数据永远新鲜，只要缓存里有这个数据，组件挂载时就不会主动重取。但前提是缓存里还存着这个数据。
• cacheTime：管数据在没人用（钩子卸载）后，能在缓存里待多久。React Query默认是5分钟，超过这个时间，缓存里的数据会被自动清理掉。

你遇到的情况就是：离开页面后，钩子卸载，过了5分钟缓存被清了。再回来时缓存是空的，React Query只能重新发请求拿数据。

关于设置cacheTime: Infinity的合理性 #

这么做是有效的，但要结合你的业务场景判断：

• 如果用户列表是很少变动的静态数据，而且数据量不大，直接设cacheTime: Infinity完全没问题，只要queryKey不变，下次进页面直接用缓存，不会发请求。
• 如果数据可能在后台更新，但你不想自动刷新，只想让用户手动触发更新，可以保留staleTime: Infinity+cacheTime: Infinity，再加个手动刷新按钮（调用queryClient.invalidateQueries来触发重取）。
• 如果数据量很大，长期存缓存占内存，那建议设一个合适的cacheTime（比如24小时），既保留缓存体验，又避免内存浪费。

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