新版React-Query中onSuccess与onError失效，求解决方案

React Query v5（包括TRPC基于它封装的useQuery）已经废弃了onSuccess和onError配置选项，你可以通过监听查询状态来实现相同的逻辑，具体修改如下：

核心思路 #

不再在useQuery的配置里传入回调，而是通过useQuery返回的状态值（isSuccess、isError、data、error），配合useEffect来触发对应的跳转逻辑。

修改后的完整代码 #

"use client"

import { useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { trpc } from '../_trpc/client'
import { Loader2 } from 'lucide-react'

const Page = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const origin = searchParams.get('origin')

  // 获取查询的状态和结果
  const { isSuccess, isError, data, error } = trpc.authCallback.useQuery(undefined, {
    retry: true,
    retryDelay: 500,
    // 移除废弃的onSuccess/onError
  })

  // 处理成功逻辑
  useEffect(() => {
    if (isSuccess && data?.success) {
      // 用户同步到数据库后跳转
      router.push(origin ? `/${origin}` : '/dashboard')
    }
  }, [isSuccess, data, router, origin])

  // 处理错误逻辑
  useEffect(() => {
    if (isError && error?.data?.code === 'UNAUTHORIZED') {
      router.push('/sign-in')
    }
  }, [isError, error, router])

  return (
    <div className='w-full mt-24 flex justify-center'>
      <div className='flex flex-col items-center gap-2'>
        <Loader2 className='h-8 w-8 animate-spin text-zinc-800' />
        <h3 className='font-semibold text-xl'>
          Setting up your account...
        </h3>
        <p>You will be redirected automatically.</p>
      </div>
    </div>
  )
}

export default Page

关键修改点 #

• 从useQuery的返回值中解构出isSuccess、isError、data、error这几个状态
• 用两个独立的useEffect分别监听成功和错误状态的变化，触发对应的路由跳转
• 保留原有的retry和retryDelay配置，这两个选项在React Query v5中仍然有效

这种方式更符合React的状态驱动范式，也适配了最新版React Query的API规范。

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