如何最优地从react-query缓存中读取数据，避免重复发起网络请求？

以下是可直接落地的几个实现思路，兼顾简洁性和可扩展性：

方案1：通过initialData配置直接从父缓存初始化 #

无需修改现有业务逻辑，仅在单条数据的查询配置中增加缓存读取规则即可，是最轻量的实现方案：

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

const useTodoDetail = (todoId) => {
  const queryClient = useQueryClient()
  return useQuery({
    queryKey: ['todos', todoId],
    queryFn: () => fetchTodoById(todoId), // 原有的详情请求逻辑保留
    // 优先从全量列表缓存匹配目标数据
    initialData: () => {
      const allTodos = queryClient.getQueryData(['todos'])
      return allTodos?.find(todo => todo.id === todoId)
    },
    // 继承列表缓存的更新时间，保证缓存新鲜度判断一致
    initialDataUpdatedAt: () => queryClient.getQueryState(['todos'])?.dataUpdatedAt,
    staleTime: 5 * 60 * 1000 // 按需配置缓存有效时间，时间内不会重复发请求
  })
}

如果父缓存中没有匹配到数据，initialData返回undefined，会自动走原有请求逻辑，完全兼容列表没访问过、直接进详情页的场景。

方案2：封装通用层级缓存查询函数 #

如果业务中有大量「列表-详情」、「分组-子项」的层级缓存复用需求，可以封装通用工具避免重复写判断逻辑：

// 通用工具：优先从同前缀的上级缓存匹配数据，匹配失败再发请求
const createHierarchicalQueryFn = (prefixKey, matchField, fetchFn) => {
  return async (context) => {
    const { queryKey, queryClient } = context
    // 遍历所有同前缀的上级缓存查找匹配数据
    for (let i = queryKey.length - 1; i > 0; i--) {
      const parentKey = queryKey.slice(0, i)
      if (parentKey[0] !== prefixKey) continue
      const parentData = queryClient.getQueryData(parentKey)
      if (!parentData) continue
      const matchValue = queryKey.at(-1)
      const matched = Array.isArray(parentData)
        ? parentData.find(item => item[matchField] === matchValue)
        : parentData?.[matchValue]
      if (matched) return matched
    }
    // 无匹配则执行原始请求
    return fetchFn(context)
  }
}

// 业务侧使用时仅需要套一层工具函数即可
const useTodoDetail = (todoId) => {
  return useQuery({
    queryKey: ['todos', todoId],
    queryFn: createHierarchicalQueryFn('todos', 'id', fetchTodoById),
    staleTime: 5 * 60 * 1000
  })
}

这个方案支持多层级缓存匹配，比如存在['todos', 'group', 'work']的分组缓存时，也能自动从分组缓存中匹配对应id的待办数据，不需要额外编码。

方案3：列表请求成功后预填充所有单条缓存 #

如果列表返回的数据量不大，可以在列表查询的成功回调中直接预写所有单条数据的缓存，详情页不需要做任何改造就能直接命中缓存：

const useTodoList = () => {
  const queryClient = useQueryClient()
  return useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
    onSuccess: (todos) => {
      // 批量预写所有单条待办的缓存
      todos.forEach(todo => {
        queryClient.setQueryData(['todos', todo.id], todo)
      })
    }
  })
}

该方案的额外优势是缓存失效可以统一处理：调用queryClient.invalidateQueries(['todos'])时，所有子级['todos', id]的缓存也会同步失效，不需要单独维护失效规则。

注意事项 #

• 如果列表返回的字段和详情返回的字段不一致，可以给详情查询加gcTime配置，等待详情请求返回后自动合并完整字段
• 列表和详情的staleTime、cacheTime建议保持一致，避免出现列表缓存已过期、详情还在使用从列表同步的旧数据的问题
• 如果业务对实时性要求不高，可以给详情查询加enabled: () => !queryClient.getQueryData(['todos', todoId])配置，只要缓存存在就永远不发额外请求

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