React Query中实现全局状态复用的标准方案是什么？

React Query 自带全局级缓存能力，只要应用根层包裹QueryClientProvider，所有子组件通过相同queryKey访问的缓存完全全局共享，完全可以替代Redux/Context实现用户信息、全局配置这类跨组件复用的状态能力，不需要额外引入全局状态管理库。

一、前置全局配置 #

首先在应用入口初始化QueryClient，针对Auth这类低变动频率的全局数据配置缓存规则，避免无意义的重复请求：

// 入口文件 main.jsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import ReactDOM from 'react-dom/client'
import App from './App'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 30, // 数据30分钟内视为新鲜，组件重挂载、窗口重新聚焦都不会触发重复请求
      gcTime: Infinity, // 缓存永久保留，不会因为组件卸载被垃圾回收
      refetchOnWindowFocus: false,
    },
  },
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
)

二、Auth全局状态封装与复用 #

固定全局统一的queryKey（比如['auth', 'currentUser']），封装通用hook供所有组件调用，所有调用方拿到的都是同一份缓存数据：

// hooks/useCurrentUser.js
import { useQuery } from '@tanstack/react-query'
import { fetchCurrentUser } from '@/api/user' // 自行实现的接口请求方法，返回用户id、token、权限等信息

export default function useCurrentUser() {
  return useQuery({
    queryKey: ['auth', 'currentUser'],
    queryFn: fetchCurrentUser,
    initialData: null,
  })
}

任意嵌套层级的组件不需要额外包裹Context、不需要传props，直接调用hook即可访问全局状态：

// 任意业务组件内使用示例
function UserAvatar() {
  const { data: user, isLoading } = useCurrentUser()
  if (isLoading) return <Skeleton />
  if (!user) return <LoginEntry />
  return <img src={user.avatar} alt={user.nickname} />
}

三、全局状态的同步更新 #

登录、登出、用户信息修改这类需要更新全局状态的场景，直接通过queryClient操作相同queryKey的缓存即可，所有引用该状态的组件会自动同步最新值，效果和Redux dispatch一致：

// 登录页逻辑示例
import { useQueryClient } from '@tanstack/react-query'
import { loginApi } from '@/api/user'

export default function LoginPage() {
  const queryClient = useQueryClient()
  const handleSubmit = async (formData) => {
    const { userInfo } = await loginApi(formData)
    // 直接写入全局缓存，不需要重新发起拉取用户信息的请求
    queryClient.setQueryData(['auth', 'currentUser'], userInfo)
    // 跳转首页
    window.location.href = '/'
  }
  // 表单渲染逻辑省略
}

// 登出逻辑示例
export default function LogoutButton() {
  const queryClient = useQueryClient()
  const handleLogout = async () => {
    await logoutApi()
    // 清空全局auth缓存，所有依赖用户状态的组件自动切到未登录态
    queryClient.setQueryData(['auth', 'currentUser'], null)
    window.location.href = '/login'
  }
  return <button onClick={handleLogout}>退出登录</button>
}

四、注意事项 #

• 所有访问同一份全局状态的位置必须使用完全一致的queryKey，key不一致会导致缓存不共享、重复发起请求
• 完全和接口无关的纯客户端全局状态，也可以通过queryClient.setQueryData/queryClient.getQueryData操作缓存实现，不需要额外引入状态管理库
• React Query自带请求loading、error、重试等状态管理能力，不需要额外编写对应状态逻辑

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