自定义Hook中React-Query多次触发的问题咨询

为什么子组件会重新发起请求？ #

react-query的缓存是靠**查询键（queryKey）**来识别的——只要两个useQuery调用的queryKey完全一模一样，就会共享同一份缓存数据，不会重复发请求。你遇到的问题，大概率是下面某个原因：

• 查询键没对齐：你的自定义Hook里的queryKey，在父组件和子组件里生成了不同的值（比如父组件传了某个参数，子组件没传，或者Hook内部用了组件独有的state生成queryKey）。这时候react-query会把它们当成两个完全不同的查询，自然会重新发起请求。
• 缓存未被正确保留：如果你的Hook配置里把staleTime设成了0（默认值），同时父组件在加载时不渲染子组件，等父组件拿到数据后再渲染子组件，这时候缓存可能已经被标记为“过期”，react-query会重新发起请求。但你说关闭了所有重取，那更可能是queryKey的问题。

不用Context能不能实现你的需求？ #

能！react-query的缓存本身就是全局的（基于你创建的QueryClient），只要保证父子组件用同一个queryKey，就能共享数据，不需要Context。

怎么改才能达到预期？ #

1. 固定/对齐查询键：确保自定义Hook里的queryKey在父子组件中完全一致。比如获取全局列表数据，就把queryKey设成固定的['globalList']；如果需要参数，父子组件要传完全相同的参数。
2. 在Hook里统一处理降级逻辑：把失败时的降级对象放在Hook里处理，不用每个组件单独写：

   const FALLBACK_DATA = { /* 你的降级对象 */ };
   
   function useCustomDataQuery() {
     const { data, isLoading, isError } = useQuery({
       queryKey: ['fixedQueryKey'], // 固定的查询键
       queryFn: () => fetch('/api/data'),
       staleTime: Infinity, // 关闭自动重取，符合你的需求
       retry: 0, // 可选，关闭重试
     });
   
     // 统一返回：成功用真实数据，失败用降级数据
     const finalData = isError ? FALLBACK_DATA : data;
     return { data: finalData, isLoading, isError };
   }
   

3. 父组件控制渲染时机：父组件在isLoading时不渲染子组件，等加载完成或错误状态出现后再渲染。这时候子组件调用Hook时，react-query的缓存里已经有父组件请求的结果，会直接返回缓存数据，不会重新发请求。

补充说明 #

你之前关闭所有重取还是没用，核心问题肯定出在queryKey上——仔细检查你的自定义Hook，看看queryKey是不是在父子组件中生成了不同的值，这是最常见的原因。

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