NextJS路由跳转时invalidate queries失效问题求助

核心问题出在你的QueryClient默认配置组合上：

• staleTime: Number.POSITIVE_INFINITY 让数据永远不会被标记为「过时」
• refetchOnMount: false 禁止组件挂载时自动重新获取数据

即使你调用invalidateQueries把查询标记为失效，这两个配置的组合会阻止React Query在导航回列表页时触发重新请求。

解决方法（任选其一即可） #

方法1：修改单个查询的挂载重取规则

在useQuery里显式设置refetchOnMount: 'always'，强制组件挂载时无论数据状态如何都重新获取：

const { data, isLoading, error } = useQuery({
  queryKey: ['branchList'],
  queryFn: getAllBranches,
  refetchOnMount: 'always',
});

方法2：调整全局默认配置

如果希望全局生效，可以修改QueryClient的默认选项，把refetchOnMount改为'always'，或者调整staleTime为合理值（比如0，让数据立即过时）+ refetchOnMount: true：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: 'always', // 替换原来的false
      refetchOnReconnect: false,
      retry: 1,
      staleTime: Number.POSITIVE_INFINITY,
    },
  },
});

方法3：添加数据后直接触发重取

在调用invalidateQueries之后，手动调用refetchQueries，立即获取最新数据，不用等导航回来：

// 数据添加完成后执行
await queryClient.invalidateQueries({ queryKey: ['branchList'] });
await queryClient.refetchQueries({ queryKey: ['branchList'] });

补充说明 #

控制台显示查询已失效，是因为invalidateQueries确实把该查询的状态标记为失效，但React Query只会在满足「数据过时」或「配置强制重取」的条件下才会发起新请求。你的原配置刚好避开了这两个条件，所以没有触发重新获取。

内容的提问来源于stack exchange，提问作者N.K.