React Query 动态参数传递技巧

本文深入解析了在 React Query 中正确处理动态参数（如 token）的核心实践，强调必须将参数作为 useQuery 的声明式依赖传入查询键和配置中，而非错误地依赖 refetch 临时传参；通过结合 enabled 开关、响应式查询键和状态驱动的触发机制，既能确保请求的时机精准、缓存隔离可靠，又能避免未定义参数导致的错误和无效调用，从而构建出真正符合 React Query 声明式数据获取哲学的健壮、可维护的数据层。

在 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 的设计哲学：声明式、可缓存、自动同步、易于调试。

今天关于《React Query 动态参数传递技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！