在 react query 中，应将动态参数（如 token）作为 hook 的依赖项传入，而非通过 refetch 二次传参；需结合状态管理与 enabled 选项控制查询时机，确保参数存在时才发起请求。
在 react query 中，应将动态参数（如 token）作为 hook 的依赖项传入，而非通过 refetch 二次传参；需结合状态管理与 enabled 选项控制查询时机，确保参数存在时才发起请求。
React Query 的 useQuery hook 设计遵循“声明式数据获取”原则：查询逻辑应由输入参数和启用条件共同决定，而非在调用 refetch() 时临时注入新参数。你当前尝试在 refetch(true, {token}) 中传入 token 的做法是无效的——因为 refetch 仅会重新执行已定义的 query function，而该函数在 hook 初始化时已绑定原始参数（此时 token 为 undefined），无法动态覆盖。
✅ 正确做法是：将 token 作为自定义 hook 的必传参数，并在 useQuery 配置中使用 enabled: !!token 控制查询开关。这样既保证了查询键（["users-info", token]）的唯一性与响应性，又避免了无效请求。
以下是优化后的完整实现：
// hooks/useUserInfo.ts
import { useQuery } from '@tanstack/react-query';
import { fetchUserInfo } from '@/api/user';
export const useUserInfo = (token: string | undefined) => {
return useQuery({
queryKey: ['users-info', token],
queryFn: () => fetchUserInfo(token!),
enabled: !!token, // ✅ 仅当 token 存在时才执行请求
staleTime: 5 * 60 * 1000, // 可选：5 分钟内视为新鲜数据
});
};// components/Auth.tsx
import { useState, useEffect } from 'react';
import { useUserInfo } from '@/hooks/useUserInfo';
const Auth = () => {
const [token, setToken] = useState<string | undefined>(undefined);
const { data: userInfo, isFetching, error } = useUserInfo(token);
const handleLoginPopup = async () => {
try {
// 模拟登录获取 token
const newToken = 'abcd121212';
setToken(newToken); // ✅ 触发 useUserInfo 自动查询
} catch (err) {
console.error('Login failed:', err);
}
};
// ✅ 数据就绪后统一处理副作用（dispatch & navigate）
useEffect(() => {
if (userInfo) {
dispatch({ type: 'SET_USER', payload: userInfo });
navigate('/');
// ⚠️ 注意：location.reload() 通常不推荐 —— 它会丢失 React 状态和路由上下文；
// 建议改用 navigate('/') + 合理的路由守卫或状态持久化方案
}
}, [userInfo]);
return (
<div>
<button onClick={handleLoginPopup} disabled={isFetching}>
{isFetching ? 'Logging in...' : 'Login'}
</button>
{error && <p style={{ color: 'red' }}>Failed to load user info</p>}
</div>
);
};
export default Auth;? 关键注意事项：
- 不要在 refetch() 中传参：refetch() 不接受新参数，它只重放当前 query function（已闭包捕获初始参数）。若需更新参数，请更新 hook 的输入（如 token 状态），让 React Query 自动触发新查询。
- 查询键必须包含所有影响结果的变量：['users-info', token] 确保不同 token 对应独立缓存，避免数据污染。
- 启用条件优先于手动触发：enabled: !!token 是安全边界，防止 fetchUserInfo(undefined) 报错。
- 副作用应在 useEffect 中响应数据变更：而非混入事件处理函数，保障可预测性和可测试性。
- 避免 location.reload()：破坏单页应用体验；应通过状态管理和路由重定向实现无刷新切换。
遵循以上模式，你的数据流将更符合 React Query 的设计哲学：声明式、可缓存、自动同步、易于调试。
