React-Query中useQuery登录跳转后如何触发重新拉取验证数据？

路由跳转后verify一直返回undefined，核心是两个逻辑漏洞：

• 你将bearerToken设为useQuery的queryKey依赖，但登录后写入cookie的token没有同步为响应式变量，首次进入落地页时读取到的bearerToken为空，直接触发了queryFn里if (!bearerToken) return undefined的分支，校验请求根本没有发出
• React Query默认会复用已有缓存结果，token更新后你没有主动触发对应查询的失效重拉，所以页面一直读取之前的undefined缓存，只有手动刷新页面清空缓存后才能拿到正确结果

1. 修正queryKey与queryFn的传参逻辑，保证token变化自动触发重拉 #

不要在queryFn内部隐式读取cookie中的token，把token作为参数传入queryFn，保证queryKey和实际请求使用的token完全一致，同时加启用判断避免空值发无效请求：

const getQueryService = () => {
  return {
    // 直接接收token作为入参，消除隐式依赖
    verify: async (bearerToken: string): Promise<AuthVerifyTokenResponse | undefined> => {
      if (!bearerToken) {
        return undefined
      }
      try {
        const result = await authApi.tokenVerifyGet()
        return result
      } catch (error) {
        console.error("User verify error", error)
        return undefined
      }
    },
  }
}

// 注意bearerToken必须是响应式读取的值，可通过cookie监听hook、全局状态（Context/Zustand/Redux）维护
const { data: verify, isLoading } = useQuery(
  ["verify", bearerToken],
  // 从queryKey中取token传入请求函数，保证依赖一致
  ({ queryKey: [, token] }) => queryService.verify(token),
  {
    // 仅当token存在时启用查询，杜绝空token发无效请求
    enabled: !!bearerToken
  }
)

2. token更新后主动失效缓存，触发自动重拉 #

不管是登录成功写入新token，还是refreshToken接口刷新token完成，都要主动通知React Query标记旧的verify缓存为失效，自动触发重新请求。注意要等token写入cookie完成后再触发失效，避免时序错误：

const queryClient = useQueryClient()

// 修正原有refreshToken逻辑
useEffect(() => {
  const runRefresh = async () => {
    if (!verify) {
      // 等待token刷新完成、新值写入cookie后再操作缓存
      await refreshToken()
      // 失效所有verify相关缓存，自动触发重拉
      queryClient.invalidateQueries(["verify"])
    }
  }
  runRefresh()
}, [verify, queryClient])

// 登录逻辑里也要加缓存失效操作
const handleLogin = async () => {
  // 原有登录提交、鉴权逻辑
  await submitLogin()
  // 新bearerToken写入cookie后，失效校验缓存
  queryClient.invalidateQueries(["verify"])
  // 再执行路由跳转
  router.push('/')
}

3. 可选优化：路由切换强制重拉 #

如果业务要求每次进入落地页都强制校验一次token有效性，可以给useQuery增加挂载时重拉配置，组件每次挂载都会重新发起校验请求，不依赖缓存失效触发：

const { data: verify, isLoading } = useQuery(
  ["verify", bearerToken],
  ({ queryKey: [, token] }) => queryService.verify(token),
  {
    enabled: !!bearerToken,
    // 组件每次挂载都强制重新拉取数据
    refetchOnMount: 'always'
  }
)

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