React Query禁用查询后refetch获旧数据，如何强制拉取新数据？

先修正代码中的基础错误 #

你的代码存在两个关键错误，这可能是问题的根源：

1. 错误使用useQuery代替useMutation：mutate是useMutation专属方法，useQuery没有这个API，必须替换为useMutation。
2. enabled配置位置错误：enabled是useQuery的顶级配置项，不能嵌套在query对象里。

强制refetch获取全新数据的方案 #

要让refetchMovies每次都从服务器拉取新数据，可通过以下两种方式实现：

方案1：调用refetch时添加force: true参数

在onSuccess回调中调用refetchMovies时，传入{ force: true }，强制忽略缓存请求新数据：

const addList = useCallback(
  (data) => {
    mutate(
      {
        data: {
          collection: data,
        },
      },
      {
        onSuccess: () => refetchMovies({ force: true }), // 添加force参数强制刷新
        onError: (error) => console.log('error')
      }
    )
  },
  [mutate, refetchMovies]
)

方案2：给movies的useQuery设置staleTime: 0

将staleTime设为0，意味着数据一旦获取就会标记为"过时"，后续任何refetch操作都会自动从服务器请求新数据：

const {data, refetch: refetchMovies} = useQuery('movies', fetchMovies, {
  enabled: false, // 修正配置位置
  staleTime: 0 // 强制数据立即过时
})

修改后的完整代码 #

import { useQuery, useMutation, useCallback } from '@tanstack/react-query';

const MyComponent = () => {
    const {data, refetch: refetchMovies} = useQuery('movies', fetchMovies, {
      enabled: false,
      staleTime: 0
    })

    // 替换useQuery为useMutation
    const {mutate} = useMutation('list', fetchList)
    
    const addList = useCallback(
      (data) => {
        mutate(
          {
            data: {
              collection: data,
            },
          },
          {
            onSuccess: () => refetchMovies({ force: true }),
            onError: (error) => console.log('error')
          }
        )
      },
      [mutate, refetchMovies]
    )

  return (
    <div onClick={() => addList(someData)}> {JSON.stringify(data)} </div>
  )
}

补充说明 #

• force: true是针对单次refetch的强制刷新，适合仅在特定场景（比如mutate成功后）刷新的情况。
• staleTime: 0是全局配置该query的缓存策略，只要数据不是最新状态就会请求新数据，适合需要始终获取最新数据的场景。

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