如何阻止useQuery在页面点击时重复触发数据请求？

react-query（@tanstack/react-query）默认开启了窗口焦点重取的行为——当页面从后台切回、或者点击页面让窗口获得焦点时，会自动重新执行queryFn获取数据，这就是你每次点击页面都会打印"Hello World"的原因。

要阻止这种不必要的重复请求，有两种常用方式：

1. 针对单个查询禁用焦点重取 #

直接在当前useQuery的配置中添加refetchOnWindowFocus: false，只关闭这个查询的自动重取行为：

const { data, refetch, isLoading } = useQuery({
    queryKey: "some-key",
    queryFn: () => console.log("Hello World"),
    refetchOnWindowFocus: false // 关闭当前查询的窗口焦点自动重取
});

2. 全局禁用所有查询的焦点重取 #

如果你的项目里所有查询都不需要这个默认行为，可以在创建QueryClient时全局配置：

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

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false, // 全局关闭窗口焦点自动重取
        }
    }
});

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

额外说明 #

如果之后需要手动更新数据，可以直接调用refetch()方法；如果需要定时更新，可以配置refetchInterval参数；当queryKey中的依赖值变化时，useQuery也会自动触发新的请求，这些都是可控的更新方式。

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