React Query如何在组件挂载时refetch数据 解决路由跳转返回旧缓存问题

问题原因 #

你遇到的现象是React Query的缓存机制和当前配置共同导致的：
你给useQuery设置了staleTime: 5000，代表请求成功后的5秒内，tableInfo这个key对应的数据会被标记为新鲜状态，此时组件重新挂载（比如从其他页面导航返回）时，React Query会直接复用缓存数据，不会发起新请求。

解决方案 #

你可以根据业务需求选择以下任意一种方式：

• 方案1：调整staleTime为0
  这个配置会让数据请求完成后立刻被标记为陈旧，组件每次挂载都会自动触发重新请求，请求过程中会先展示旧缓存，新数据返回后自动更新。
  代码修改如下：

  const { data, status } = useQuery('tableInfo', fetchInfo, {
    staleTime: 0,
  });
  

• 方案2：新增refetchOnMount强制挂载请求
  如果你不想修改原有staleTime的缓存逻辑，只需要组件挂载时强制刷新，可以新增refetchOnMount: 'always'配置，不管当前缓存是否新鲜，只要组件挂载就会发起新请求。
  代码修改如下：

  const { data, status } = useQuery('tableInfo', fetchInfo, {
    staleTime: 5000,
    refetchOnMount: 'always'
  });
  

额外注意 #

如果你的接口依赖的id参数会动态变化，记得把id加入query key，避免id切换后依然复用旧缓存：

const { data, status } = useQuery(['tableInfo', id], fetchInfo, {
  // 你的配置项
});

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