react-query如何正确获取已提前请求的缓存结果 无需重复发起请求

你直接调用useQuery('chapters')返回空且触发刷新，是因为react-query要求useQuery必须传入查询函数作为第二个参数，缺失查询函数时无法正常读取缓存，还会因为缺少请求逻辑返回空结果。以下是几种可行的实现方案：

方案1：封装自定义查询Hook（官方推荐） #

你想到的这个方案本身就是react-query官方最推荐的最优解：

• 把查询key、查询函数、缓存配置都统一封装在同一个Hook里，所有需要用到该数据的组件直接调用即可
• 同一个query key的查询，react-query全局只会在缓存失效/不存在时发起一次请求，其余调用都会直接读取缓存，不会产生重复请求

代码示例：

// 统一封装的自定义Hook
const useChapters = () => {
  return useQuery(
    'chapters',
    getChapters,
    {
      // 可根据业务配置缓存策略，比如设置staleTime为Infinity表示永久不过期，拿到数据后永远不会自动重请求
      staleTime: Infinity,
      cacheTime: 1000 * 60 * 30 // 缓存保留30分钟
    }
  )
}

// 任意组件内调用，直接拿缓存数据，不会重复请求
const { data: chapters } = useChapters()

方案2：直接读取缓存数据（无响应式） #

如果你只需要同步获取当前缓存里的已有数据，不需要监听数据更新，直接用QueryClient实例的getQueryData方法即可，完全不会触发请求：

import { useQueryClient } from '@tanstack/react-query'

const YourComponent = () => {
  const queryClient = useQueryClient()
  // 同步读取缓存，无请求，缓存不存在时返回undefined
  const chapters = queryClient.getQueryData('chapters')
}

方案3：只读缓存的响应式查询 #

如果你需要数据响应缓存更新，但又不想让当前组件主动发起请求，可以给useQuery加enabled: false配置：

const { data: chapters } = useQuery(
  'chapters',
  getChapters,
  {
    enabled: false, // 禁止当前Hook主动发起请求，仅监听缓存数据变化
  }
)

这个写法下，只要全局有其他组件已经请求过chapters数据并存入缓存，这里就会直接返回缓存数据，且缓存更新时组件会自动同步最新值。

补充说明：你不需要担心在多个组件重复调用带查询函数的useQuery会产生多余请求，react-query内部会对同一个query key的请求做去重，只要缓存有效，所有调用都会直接复用缓存结果，仅会在缓存确实不存在/过期时才会发起一次请求。

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