如何在react-query中停止自动重新获取数据？

你遇到的是React Query默认的窗口聚焦自动重新获取行为（切换标签返回、窗口激活时触发），另外还有可能是其他自动触发机制导致的无规律重新获取。staleTime和cacheTime控制的是数据缓存状态，和这类触发条件无关，所以需要调整以下配置：

1. 禁用窗口聚焦时的自动重新获取 #

这是解决你切换标签/窗口调整问题的核心配置：

全局禁用（所有查询生效） #

在创建QueryClient时配置默认选项，一次性关闭所有查询的窗口聚焦重新获取：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // 关键配置
    },
  },
});

// 在根组件中使用
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用组件 */}
    </QueryClientProvider>
  );
}

单个查询禁用（仅当前查询生效） #

如果只想针对某个查询关闭这个行为，直接在useQuery的选项里设置：

import { useQuery } from '@tanstack/react-query';

function MyComponent() {
  const { data } = useQuery({
    queryKey: ['my-data'],
    queryFn: fetchMyData,
    refetchOnWindowFocus: false, // 仅这个查询禁用窗口聚焦重新获取
  });

  // ...组件逻辑
}

2. 检查其他自动重新触发的配置 #

如果还有无规律的重新获取，排查以下配置是否被启用，按需关闭：

• refetchOnReconnect: 网络重新连接时自动重新获取，默认是true，不需要的话设为false
• refetchInterval: 定时自动重新获取，默认是false，如果不小心设置了数值就会定时触发
• refetchOnMount: 组件挂载时是否重新获取，默认是true（如果数据stale的话），如果需要完全禁用可以设为false

为什么staleTime和cacheTime没用？ #

• staleTime：控制数据多久后变为"过期状态"，过期数据在组件挂载、窗口聚焦等触发条件下会重新获取，但它本身不控制触发条件
• cacheTime：控制数据多久后从缓存中被清除，和重新获取的触发逻辑无关

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