React Query调用refetch传递额外参数的优雅解决方案

我通过useQuery获取默认在服务器端缓存的数据，需要点击按钮时传递force=true参数强制服务器刷新查询数据，但直接调用refetch({force: true})无法生效。

我尝试了基于useState的临时方案，虽然能运行，但需要重置force状态，且状态变更会再次触发重取，想找更优雅的解决办法：

临时方案代码：

const [force, setForce] = useState(false)
const {data} = useQuery(['myQuery', id, force], () => goFetch({id, force}).then(response => response.data))

const handleClick = () => {
    setForce(true)
}

原查询代码：

const {data, refetch} = useQuery(['myQuery', id], () => goFetch({id}).then(response => response.data))

期望调用方式：

const handleClick = () => {
    refetch({force: true})
}

方案1：用动态查询键替代额外状态 #

不需要单独维护force状态，而是把一个自增的刷新标识放到查询键中，通过更新标识触发重取，同时在查询函数中传递强制刷新参数：

const [refreshTrigger, setRefreshTrigger] = useState(0)

const {data} = useQuery(
  ['myQuery', id, refreshTrigger],
  () => goFetch({id, force: refreshTrigger !== 0}).then(res => res.data)
)

const handleClick = () => {
  // 每次点击更新触发值，查询键变化自动发起带force=true的请求
  setRefreshTrigger(prev => prev + 1)
}

这个方案里，初始refreshTrigger为0，查询函数传入force=false；点击后触发值递增，查询键更新，useQuery自动重新请求，此时force=true。无需手动重置状态，下次点击只需继续递增即可。

方案2：利用useQuery内置的强制刷新选项（以React Query为例） #

如果使用的是React Query，refetch方法支持refetchType: 'hard'参数，直接绕过缓存强制请求服务器，不需要修改查询函数的参数传递逻辑：

const {data, refetch} = useQuery(
  ['myQuery', id],
  () => goFetch({id}).then(res => res.data)
)

const handleClick = () => {
  // hard类型的重取会跳过缓存，直接请求服务器
  refetch({ refetchType: 'hard' })
}

注意要确保你的goFetch函数能配合这种方式生效（比如React Query会自动在请求头添加缓存控制参数，或者你需要在函数内部根据查询的缓存状态处理）。

方案3：手动失效缓存后重取 #

通过useQuery的缓存管理API，直接让目标查询的缓存失效，再调用refetch就会自动拉取新数据：

const queryClient = useQueryClient() // 需引入QueryClient

const {data, refetch} = useQuery(
  ['myQuery', id],
  () => goFetch({id}).then(res => res.data)
)

const handleClick = () => {
  // 使对应查询的缓存失效
  queryClient.invalidateQueries(['myQuery', id])
  // 此时调用refetch会直接请求服务器
  refetch()
}

这种方式更直接，不需要修改查询键或维护额外状态，适合需要精准控制缓存的场景。

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