设置staleTime/gcTime为Infinity后TanStack Query仍自动重取问题

问题根源 #

你设置的staleTime: Infinity仅将缓存数据标记为永久新鲜，但TanStack Query默认会在组件挂载、查询键切换回已缓存值时触发后台重取，这是独立于staleTime的默认行为。

修复方案 #

在useQuery配置中添加三个禁用自动重取的选项，彻底关闭不必要的后台请求：

export const useSearchDictionaryQuery = (lang: Languages, searchTerm: string) =>
  useQuery({
    queryKey: ['searchDictionary', searchTerm, lang],
    queryFn: () => fetchSearchDictionary(lang, searchTerm),
    enabled: false,
    staleTime: Infinity,
    gcTime: Infinity,
    // 禁用所有自动触发的重取行为
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });

选项说明 #

• refetchOnMount: false：组件挂载时，不重取已缓存的新鲜数据
• refetchOnWindowFocus: false：窗口重新获得焦点时不触发重取
• refetchOnReconnect: false：网络恢复连接时不触发重取

后续若需要主动更新数据，可调用useQuery返回的refetch方法手动触发。

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