React Query如何禁用新实例创建时的自动请求？

要避免useQuery每次创建新实例就重新发起请求，核心是利用React Query的缓存策略，以下是具体方案：

• 确保查询使用稳定的queryKey
  React Query通过queryKey唯一标识缓存数据，只要不同实例的queryKey完全一致，就会复用缓存。绝对不要用动态生成的不稳定值（比如随机数、组件内部临时变量）作为key的一部分：

  // 错误写法：每次渲染生成新key，导致缓存失效
  useQuery([Date.now(), 'user-list'], fetchUserList);
  
  // 正确写法：使用固定的、可识别的queryKey
  useQuery(['user-list'], fetchUserList);
  

• 配置staleTime（数据过时时间）
  默认staleTime为0，意味着数据被视为立刻过时，组件挂载/实例创建时会自动重新请求。设置合适的staleTime，让数据在指定时长内保持"新鲜"状态，不会触发自动请求：

  useQuery(['user-list'], fetchUserList, {
    staleTime: 300000, // 5分钟内数据视为新鲜，不会重复请求
  });
  

• 禁用自动重新请求触发条件
  如果需要彻底关闭自动重新请求（仅在手动调用refetch()或缓存被主动更新时才请求），可以将以下配置设为false：

  useQuery(['user-list'], fetchUserList, {
    staleTime: Infinity, // 数据永不过时
    refetchOnMount: false, // 组件挂载时不重新请求
    refetchOnWindowFocus: false, // 窗口聚焦时不重新请求
    refetchOnReconnect: false, // 网络重连时不重新请求
  });
  

• 全局默认配置（推荐）
  如果希望所有useQuery实例都遵循相同的缓存规则，可以在创建QueryClient时设置全局默认选项，无需逐个配置：

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 300000,
        refetchOnMount: false,
        refetchOnWindowFocus: false,
        refetchOnReconnect: false,
      },
    },
  });
  
  // 在应用根组件中提供QueryClient
  function App() {
    return (
      <QueryClientProvider client={queryClient}>
        {/* 你的应用组件 */}
      </QueryClientProvider>
    );
  }
  

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