如何在react-query中修改useQuery的默认配置选项？

当然可以实现，而且步骤很清晰，核心是通过QueryClient的全局配置结合QueryClientProvider来让所有useQuery自动继承默认选项，具体操作如下：

1. 创建QueryClient时配置全局默认选项 #

在实例化QueryClient时，通过defaultOptions.queries字段定义useQuery的全局默认配置，比如缓存时长、重试策略、窗口聚焦是否重请求等：

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜，不自动触发重请求
      refetchOnWindowFocus: false, // 窗口切换后不自动重请求
      retry: 1, // 请求失败后仅重试1次
      refetchOnMount: true, // 组件挂载时自动重请求（默认值）
    },
  },
});

2. 通过Provider全局注入QueryClient #

将配置好的queryClient通过QueryClientProvider包裹根组件，这样整个应用内的useQuery都会自动读取全局默认配置：

import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './path-to-your-query-client';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用页面/组件都放在这里 */}
    </QueryClientProvider>
  );
}

3. 局部覆盖默认配置（可选） #

如果某个特定的useQuery需要单独配置，直接在调用时传入选项即可，局部配置会优先于全局默认值：

const { data } = useQuery({
  queryKey: ['user-profile'],
  queryFn: fetchUserProfile,
  staleTime: 0, // 这里会覆盖全局的5分钟缓存设置
  retry: 0, // 禁用该请求的重试
});

关联原理说明 #

QueryClientProvider会把QueryClient实例注入到React上下文，useQuery内部会自动从上下文获取这个实例，并应用其中的defaultOptions.queries配置，无需手动关联，全局注入后就会生效。

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