浏览器重新聚焦时TanStack useQuery触发数据重取的原因与解决方法

TanStack Query（原React Query）的useQuery默认开启了**窗口焦点重取（refetchOnWindowFocus）**功能。这个设计的初衷是：当用户离开浏览器标签页后再返回时，确保页面展示的数据是最新的——毕竟用户离开期间，服务器端的数据可能已经发生了更新。

你可以通过两种方式禁用这个自动重取行为，按需选择即可：

1. 全局禁用（影响所有查询） #

在创建QueryClient时，通过defaultOptions全局配置关闭窗口焦点重取，这样所有useQuery都会继承这个设置：

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用组件内容 */}
    </QueryClientProvider>
  );
}

2. 单个查询禁用（仅影响当前useQuery） #

如果只想针对某个特定的useQuery关闭该行为，直接在调用时添加refetchOnWindowFocus: false配置即可：

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

function MyDataComponent() {
  const { data } = useQuery({
    queryKey: ['userData'],
    queryFn: () => fetch('/api/user').then(res => res.json()),
    refetchOnWindowFocus: false, // 仅禁用当前查询的焦点重取
  });

  // 组件渲染逻辑
}

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