React Query v5下trpc.authCallback.useQuery获取成功auth回调的问题求助

1. 确认React Query v5的useQuery状态处理逻辑 #

React Query v5移除了onSuccess/onError选项，需通过监听isSuccess/isError状态结合useEffect执行回调逻辑，确保代码写法正确：

import { useQuery } from '@tanstack/react-query'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'

const AuthCallbackPage = () => {
  const router = useRouter()
  const { data, isSuccess, isError, error } = useQuery({
    queryKey: ['auth-callback'],
    queryFn: async () => {
      // 替换为你的auth回调请求逻辑
      const searchParams = new URLSearchParams(window.location.search)
      const code = searchParams.get('code')
      if (!code) throw new Error('授权码不存在')
      
      const res = await fetch('/api/auth/callback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code })
      })
      
      if (!res.ok) throw new Error('授权回调失败')
      return res.json()
    }
  })

  // 处理成功回调逻辑
  useEffect(() => {
    if (isSuccess && data) {
      // 示例：存储token、跳转首页
      localStorage.setItem('user-token', data.token)
      router.push('/')
    }
  }, [isSuccess, data, router])

  // 处理错误回调逻辑
  useEffect(() => {
    if (isError && error) {
      // 示例：打印错误、跳转登录页
      console.error('授权错误:', error.message)
      router.push('/login')
    }
  }, [isError, error, router])

  return <div>处理授权中...</div>
}

export default AuthCallbackPage

注意：必须用useEffect监听状态变化，避免在组件渲染阶段直接执行逻辑（会导致重复触发）。

2. 检查授权回调的核心依赖 #

• URL参数校验：确认页面URL中存在code等授权参数，若参数缺失，queryFn会直接抛出错误，触发isError而非isSuccess
• 请求合法性：在浏览器Network面板查看回调请求的状态码、响应内容，若后端返回4xx/5xx错误，需排查后端接口逻辑
• 路由实例正确性：确保使用的路由对象（如Next.js的useRouter）是当前页面的有效实例，避免跳转失败

3. 排查React Query缓存与执行时机 #

• 给查询设置唯一的queryKey，避免与其他查询缓存冲突
• 添加enabled选项控制查询执行时机，防止重复请求：

  useQuery({
    // ...其他配置
    enabled: !localStorage.getItem('user-token'), // 已登录则不执行回调查询
    refetchOnWindowFocus: false
  })
  

• 安装@tanstack/react-query-devtools，在DevTools中查看该查询的具体状态（loading/success/error）、返回数据或错误信息，定位问题

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