能否通过react-query根据查询响应设置缓存时间与过时时间？

你贴的写法完全不可行，原因很直接：useQuery的配置参数是在组件渲染/初始化阶段同步确定的，这时候接口请求还没完成，data变量是undefined，所以data.cacheTime和data.staleTime根本取不到有效值，自然无法生效。

要实现“根据接口返回结果动态设置cacheTime和staleTime”，可以通过先发起基础查询，拿到数据后更新查询配置并重新触发查询的方式实现，以下是两种可行方案：

方案1：使用queryClient更新查询默认配置 #

import { useQuery, useQueryClient } from 'react-query' // v3.39.3

const MyComponent = () => {
  const queryClient = useQueryClient()
  const queryKey = 'my-query'

  const { data } = useQuery(queryKey, () => api.getSomething(), {
    // 初始使用临时默认值
    cacheTime: 5000,
    staleTime: 0,
    onSuccess: (responseData) => {
      // 用接口返回的时间配置更新查询默认值
      queryClient.setQueryDefaults(queryKey, {
        cacheTime: responseData.cacheTime,
        staleTime: responseData.staleTime
      })
      // 重新触发查询，让新配置生效
      queryClient.refetchQueries(queryKey)
    }
  })

  return <div>{/* 渲染业务内容 */}</div>
}

方案2：用状态管理动态配置 #

import { useQuery, useState } from 'react-query' // v3.39.3

const MyComponent = () => {
  const queryKey = 'my-query'
  // 初始配置用临时值
  const [dynamicConfig, setDynamicConfig] = useState({
    cacheTime: 5000,
    staleTime: 0
  })

  const { data } = useQuery(queryKey, () => api.getSomething(), {
    ...dynamicConfig,
    onSuccess: (responseData) => {
      // 仅当配置变化时更新，避免无限循环
      if (
        responseData.cacheTime !== dynamicConfig.cacheTime ||
        responseData.staleTime !== dynamicConfig.staleTime
      ) {
        setDynamicConfig({
          cacheTime: responseData.cacheTime,
          staleTime: responseData.staleTime
        })
      }
    }
  })

  return <div>{/* 渲染业务内容 */}</div>
}

注意事项 #

• 两种方案本质都是“先拿到异步数据，再同步更新查询配置”，因为react-query不支持直接在初始配置中引用异步返回的数据
• 一定要加配置变化判断，避免因状态更新触发重复查询导致的无限循环

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