ReactQuery窗口聚焦重复获取会话触发重复登录问题求助

1. 确保QueryClient配置正确生效 #

先检查你的QueryClient实例是否正确配置了禁用聚焦重连的参数，并且已经通过QueryClientProvider全局注入：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false // 可选，防止网络恢复时自动重发请求
    },
  },
});

// 根组件中正确包裹应用
<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

如果全局配置未生效，直接给useSession的useQuery单独加配置强制覆盖：

export function useSession() {
  return useQuery(['session', 'get'], getSession, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  })
}

2. 排除加载状态误触发登录 #

窗口聚焦重请求时，session会暂时变为undefined（此时isLoading为true），你的useEffect没做状态判断，导致误触发登录。修改逻辑：

const { data: session, isLoading } = useSession();
const { mutate: login } = useLogin();

useEffect(() => {
  // 只在非加载状态、且明确无用户名时执行登录
  if (!isLoading && session?.username === null) {
    login({ username: "lime-app", password: "generic" });
  }
}, [session, isLoading, login]);

3. 设置staleTime减少无效请求 #

给会话查询配置合理的staleTime，让缓存数据在一段时间内保持有效，避免React Query频繁触发重请求：

export function useSession() {
  return useQuery(['session', 'get'], getSession, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    staleTime: 3600000 // 1小时，可根据业务调整时长
  })
}

4. 保留旧数据避免session临时丢失 #

如果仍存在重请求场景，开启keepPreviousData，让重新请求时保留旧会话数据，避免session变为undefined：

export function useSession() {
  return useQuery(['session', 'get'], getSession, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    keepPreviousData: true
  })
}

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