React Query 如何避免逐层传递query对象实现子组件refetch

存在React Query内置方案，无需自定义Context，也不需要逐层透传整个query对象。React Query（TanStack Query）的全局缓存机制原生支持跨组件共享请求状态与方法，可直接使用以下两种方案实现：

方案1：深层组件直接调用同源useQuery（最推荐） #

• React Query 内部通过全局QueryClient统一管理所有请求状态，相同queryKey的useQuery调用会自动共享同一份状态、方法，不会发起重复冗余请求。很多人误以为每个useQuery调用是独立的，实际上库内部已经把所有query实例按key存在全局缓存里了，多组件调用同key的useQuery只会在首次触发时发请求，后续调用直接拿缓存里的实例，完全没有额外开销。
• 你不需要从顶层组件把整个query对象往下传，只要在需要调用refetch的组件中，传入queryKey所需的参数，调用同一个自定义query hook，就能拿到和顶层组件完全一致的refetch方法。
• 如果queryKey依赖的参数（比如示例中的id）可以直接从路由、其他独立状态源获取，连参数透传都不需要。

改后的代码示例：

const A = ({ id }) => {
  const { data } = useMyQuery(id);
  // 只向下传递渲染需要的data，以及必要的queryKey参数id即可
  return <B data={data} id={id} />
}

const B = ({ data, id }) => {
   // 中间组件不需要感知任何query逻辑，只透传必要参数
   return data.map(i => (<C item={i} id={id} />));
}

const C = ({ item, id }) => {
  return (
    <> 
      <SomeOther />
      <D id={id} />
    </>
  );
}

const D = ({ id }) => {
  // 直接调用同源自定义hook，拿到的refetch和A组件中的是同一个实例
  const { refetch } = useMyQuery(id);
  const someAction = async () => {
     await doSmth();
     refetch();
  }

  return <button onClick={someAction}>Smth</button>;
}

方案2：通过useQueryClient直接按key触发重拉 #

如果不想透传任何query相关参数，可以用React Query内置的useQueryClient钩子拿到全局管理实例，直接传入目标queryKey触发对应请求的重拉，不需要持有顶层的query对象。
示例代码：

import { useQueryClient } from '@tanstack/react-query';
// 若使用v3版本的react-query，从'react-query'导入即可

const D = () => {
  const queryClient = useQueryClient();
  // 直接从路由/其他状态源拿到queryKey需要的参数，不需要上层透传
  const { id } = useParams(); // 示例：从路由参数获取id

  const someAction = async () => {
     await doSmth();
     // 按queryKey匹配触发对应请求重拉
     queryClient.refetchQueries({
        queryKey: ['myData', id]
     });
  }

  return <button onClick={someAction}>Smth</button>;
}

最佳实践补充 #

如果你的doSmth是数据增删改类操作，更推荐用React Query内置的useMutation封装修改逻辑，在操作成功的回调中调用queryClient.invalidateQueries()标记对应缓存失效，React Query会自动触发最新数据的拉取，相比手动调用refetch，能更好地保证全应用缓存一致性，也更符合库的设计逻辑。

注：以上方案依赖React Query运行必需的全局QueryClientProvider，这是库本身的内置基础组件，不属于需要额外自定义编写的Context逻辑，符合“不使用自定义Context”的要求。

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