如何在React-Query中监听其他组件的查询变化？

1. 通过Props直接传递（最直接） #

如果子组件是父组件的直接后代，直接把useQuery返回的data和isFetching通过props传给子组件即可，子组件拿到后能实时监听状态变化。

父组件代码：

import { useQuery } from '@tanstack/react-query';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const { data: posts, isFetching } = useQuery(["posts"], fetchPosts);

  return (
    <div>
      <ChildComponent posts={posts} isFetching={isFetching} />
    </div>
  );
}

子组件代码：

function ChildComponent({ posts, isFetching }) {
  if (isFetching) {
    return <div>加载中...</div>;
  }

  return (
    <ul>
      {posts?.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

2. 用React Context封装（适合深层级组件） #

如果组件层级很深，层层传props太繁琐，可以用React Context把useQuery的查询状态封装起来，任意层级的子组件都能直接从Context取数据。

首先创建Context：

// QueryContext.js
import { createContext, useContext } from 'react';

const QueryContext = createContext();

export function QueryProvider({ children, queryData }) {
  return (
    <QueryContext.Provider value={queryData}>
      {children}
    </QueryContext.Provider>
  );
}

export function useQueryContext() {
  return useContext(QueryContext);
}

父组件使用Provider：

import { useQuery } from '@tanstack/react-query';
import { QueryProvider } from './QueryContext';
import DeepChildComponent from './DeepChildComponent';

function ParentComponent() {
  const queryData = useQuery(["posts"], fetchPosts);

  return (
    <QueryProvider queryData={queryData}>
      <DeepChildComponent />
    </QueryProvider>
  );
}

深层子组件获取数据：

import { useQueryContext } from './QueryContext';

function DeepChildComponent() {
  const { data: posts, isFetching } = useQueryContext();

  if (isFetching) {
    return <div>加载中...</div>;
  }

  return (
    <ul>
      {posts?.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. 子组件直接调用相同key的useQuery（利用React Query缓存特性） #

React Query的核心是缓存机制，同一个queryKey的查询会共享缓存状态。你可以直接在子组件里调用useQuery(["posts"], fetchPosts)，它会自动复用父组件的缓存数据，并且实时监听查询状态变化，不需要额外传递数据。

子组件代码：

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

function ChildComponent() {
  const { data: posts, isFetching } = useQuery(["posts"], fetchPosts);

  if (isFetching) {
    return <div>加载中...</div>;
  }

  return (
    <ul>
      {posts?.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

这种方法的好处是组件完全独立，不依赖父组件传递任何数据，适合需要在不同场景复用的组件。

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