如何借助React Query全局状态跨组件获取接口数据？

核心问题在于React Query是通过查询key来索引缓存数据的，只要保证查询key完全一致，就能通过queryClient实例获取到缓存的userData，以下是具体实现步骤：

1. 确保主页面与独立文件使用相同的查询key #

主页面调用useQuery时，必须明确指定查询key，后续获取缓存时要完全复用这个key：

// 主页面组件
import { useQuery } from '@tanstack/react-query';

const fetchUserData = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

const MainPage = () => {
  // 定义固定的查询key：['userData']
  const { data: userData } = useQuery({
    queryKey: ['userData'],
    queryFn: fetchUserData,
  });

  // ...页面渲染逻辑
};

2. 在translation.js中获取缓存数据 #

利用已获取的queryClient实例，调用getQueryData方法传入相同的查询key即可读取缓存：

// translation.js
import { useQueryClient } from '@tanstack/react-query';

// 注意：该函数需在React组件/自定义Hook内执行（因为useQueryClient依赖React上下文）
export const getTranslatedContent = () => {
  const queryClient = useQueryClient();
  // 用与主页面完全一致的查询key获取缓存
  const userData = queryClient.getQueryData(['userData']);

  // 处理数据未加载/缓存为空的情况
  if (!userData) {
    return '默认占位文本';
  }

  // 根据userData返回对应翻译内容
  return userData.locale === 'zh-CN' ? '欢迎回来' : 'Welcome Back';
};

3. 监听缓存数据变化（可选） #

如果需要在userData更新时自动同步翻译内容，可以使用watchQuery监听缓存变化：

// translation.js 中的自定义Hook版本
import { useQueryClient } from '@tanstack/react-query';
import { useState, useEffect } from 'react';

export const useTranslatedContent = () => {
  const queryClient = useQueryClient();
  const [content, setContent] = useState('默认占位文本');

  useEffect(() => {
    // 监听查询key对应的缓存变化
    const unsubscribe = queryClient.watchQuery({
      queryKey: ['userData'],
      onChange: (updatedData) => {
        setContent(updatedData.locale === 'zh-CN' ? '欢迎回来' : 'Welcome Back');
      },
    });

    // 初始化时获取一次缓存数据
    const initialData = queryClient.getQueryData(['userData']);
    if (initialData) {
      setContent(initialData.locale === 'zh-CN' ? '欢迎回来' : 'Welcome Back');
    }

    // 组件卸载时取消监听
    return unsubscribe;
  }, [queryClient]);

  return content;
};

关键注意事项 #

• 必须保证查询key的完全一致性，哪怕是数组顺序、元素类型不同，都会导致无法命中缓存。
• useQueryClient只能在React组件树内使用，不能在纯JS函数中直接调用（如果是纯函数，需要将queryClient作为参数传入，但你提到无法传递数据对象，所以建议在React上下文内的函数/Hook中实现）。

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