TanStack Query（React Query）API请求重复触发问题咨询

核心问题1：QueryFn写法错误 #

你当前的queryFn直接执行了fetch，而非传递一个返回Promise的函数。这会导致组件每次渲染时都会立即调用fetch，完全绕过React Query的请求调度逻辑。

比如你的代码：

queryFn: fetch('http://localhost/api/user').then(res => res.json()).catch(err => err.response),

这段代码在组件渲染阶段就会立刻执行fetch，而非等到React Query决定发起请求时才执行。这就是为什么设置enabled: false时仍会出现一次请求（组件渲染触发），而enabled: true时，React Query自身还会再触发一次请求，加上默认的重试机制，就会出现多次调用。

核心问题2：StaleTime对失败请求无效 #

staleTime的作用是控制已成功缓存的数据何时变为"过时"，从而决定是否需要重新请求。但当请求失败时，React Query默认不会将失败结果存入缓存，所以staleTime对失败场景完全不起作用——没有缓存数据，自然不存在"是否过时"的判断，每次需要数据时都会重新发起请求。

解决方案 #

1. 修复QueryFn的写法
   将queryFn改为返回函数的形式，让React Query控制请求的执行时机：

export default function Home() {
  const query = useQuery({
    queryKey: ['auth-user', 1],
    // 改为返回函数的形式
    queryFn: () => fetch('http://localhost/api/user').then(res => res.json()).catch(err => err.response),
    staleTime: 10000,
    retry: false
  });

  return (
    <>
      <Navbar />
      <HeaderSection />
      <Footer />
    </>
  );
}

2. 理解Retry与StaleTime的配合

• 设置retry: false可以禁用React Query默认的失败重试机制（默认重试3次），避免失败后重复请求。
• 当请求成功后，staleTime才会生效：10秒内数据不会被标记为过时，React Query不会主动发起重新请求。

额外说明 #

如果你的组件存在多次渲染的情况（比如父组件更新导致重渲染），修复后的queryFn也不会重复发起请求——React Query会根据queryKey缓存请求结果，只有当缓存数据过时或显式触发刷新时，才会重新请求。

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