React Query点击触发refetch时如何避免重复请求，优先返回未过期缓存

解决方案 #

你遇到的问题是误用了refetch方法导致的：refetch本身的设计逻辑就是强制发起新请求、忽略缓存新鲜度判断，你要的优先读缓存的触发逻辑不需要自己手写判断，react-query原生就支持。

方案1：动态控制enabled开关（推荐） #

不需要额外调用触发方法，通过状态控制查询开关，结合缓存时间配置即可实现需求：

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

const [enableFetch, setEnableFetch] = useState(false)
const query = useQuery('your-query-key', fetchFn, {
  enabled: enableFetch,
  // 配置数据有效时长，比如2天内数据都算新鲜，不会主动重发请求
  staleTime: 2 * 24 * 60 * 60 * 1000,
  // 配置缓存留存时长，超过3天未被使用的缓存才会被清理
  cacheTime: 3 * 24 * 60 * 60 * 1000,
})

const exec = () => setEnableFetch(true)

return <button onClick={exec}>Load</button>

这个方案下，第一次点击触发查询后，2天内所有使用相同查询key的组件都会直接读取缓存，不会发起新请求。

方案2：用fetchQuery手动触发 #

如果不想额外加状态，可以直接调用queryClient提供的fetchQuery方法，它原生逻辑就是「有有效缓存返回缓存，无有效缓存才发起请求」：

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

const queryClient = useQueryClient()
const query = useQuery('your-query-key', fetchFn, { enabled: false })

const exec = async () => {
  await queryClient.fetchQuery('your-query-key', fetchFn, {
    staleTime: 2 * 24 * 60 * 60 * 1000
  })
}

return <button onClick={exec}>Load</button>

全局复用优化 #

针对你说的多组件共用相同查询的场景，可以直接在全局QueryClient配置默认的缓存规则，不需要每个查询单独配置：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 2 * 24 * 60 * 60 * 1000,
      cacheTime: 3 * 24 * 60 * 60 * 1000,
    },
  },
})

// 根组件挂载provider
function App() {
  return <QueryClientProvider client={queryClient}>{/* 业务组件 */}</QueryClientProvider>
}

内容的提问来源于stack exchange，提问作者Martin Rützy