React Query：Mutation成功后按需重取失效查询的实现问题

数据老陈

2026-7-16

问题分析与解决方案

你的需求是Mutation执行成功后，关联依赖的查询全部标记为失效，仅立即重新获取活跃状态的查询，非活跃查询待转为活跃状态时再重取，但当前使用refetchType: 'active'达不到预期，问题出在默认查询配置的refetchOnMount: false。

这个配置会完全禁止所有查询在挂载（从非活跃转为活跃）时触发重取，哪怕数据已经被invalidateQueries标记为失效（stale）。所以非活跃的失效查询在变为活跃时，不会自动发起重取请求。

修正方案

调整QueryClient默认配置：将refetchOnMount改为true，这样当查询挂载时，如果数据处于失效（stale）状态，就会自动重取：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnMount: true, // 替换原来的false
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },
})

修改Mutation的失效逻辑：使用refetchType: 'active'替代all，实现仅立即重取活跃查询：

const useCreateExample = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: createExample,
    onSuccess: () => {
      queryClient.invalidateQueries(['example'], { refetchType: 'active' })
    },
  })
}