如何在点击按钮时手动触发react-query重取数据并保留旧数据？

要实现点击重取按钮时继续显示旧数据、直到新数据获取完成再替换的效果，你需要调整状态判断逻辑并利用React Query提供的原生方法，具体步骤如下：

1. 修正数据获取函数
   你的fetchAlbums函数缺少async关键字，会导致await语法报错，先补上：

   const fetchAlbums = async () => {
     const res = await axios.get('/albums')
     return res.data
   }
   

2. 解构React Query的关键方法与状态
   从useQuery返回值中解构出refetch（手动触发重取的方法）和isRefetching（标记是否正在重取数据的状态），同时保留isLoading（标记初始加载状态）和data：

   const { isLoading, data, refetch, isRefetching } = useQuery('albums', fetchAlbums)
   

3. 调整渲染逻辑

   • 初始加载时（isLoading为true），显示Spinner
   • 已有数据时，始终展示旧数据；如果正在重取（isRefetching为true），可以添加轻量加载提示（比如按钮状态变化），但不要隐藏旧数据
   • 按钮绑定refetch方法触发重取

完整代码示例：

const { isLoading, data, refetch, isRefetching } = useQuery('albums', fetchAlbums)

const fetchAlbums = async () => {
  const res = await axios.get('/albums')
  return res.data
}

return (
  <>
    {isLoading ? (
      <Spinner />
    ) : (
      <div>
        <button onClick={refetch} disabled={isRefetching}>
          {isRefetching ? '正在刷新...' : 'Refetch data'}
        </button>
        {/* 始终展示旧数据，新数据返回后React Query会自动替换 */}
        {data}
      </div>
    )}
  </>
)

核心逻辑说明 #

• isLoading仅在首次加载且无缓存数据时为true，此时没有旧数据可展示，所以显示Spinner
• isRefetching在手动触发重取或后台自动重取时为true，此时已有缓存的旧数据，所以继续展示旧数据，同时给用户刷新中的反馈
• React Query会自动在重取完成后更新data，无需手动处理新旧数据的替换逻辑

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