CODEWITHSUNDEEP
reactjsnext.jsreact-querytanstackreact-querytrpc
Rio
Rio

Reputation: 33

onSuccess and onError are not working in newest version of React-Query?

Errors show up in onSuccess and onError functions. Did some research and turns out these functions are depcrecated in newest version of React-Query.

"use client"

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')

  trpc.authCallback.useQuery(undefined, {
    onSuccess: ({ success }) => {
      if (success) {
        // user is synced to db
        router.push(origin ? `/${origin}` : '/dashboard')
      }
    },
    onError: (err) => {
      if (err.data?.code === 'UNAUTHORIZED') {
        router.push('/sign-in')
      }
    },
    retry: true,
    retryDelay: 500,
  })

  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

Tried some to use some answers from similar problems but they were written in a completely different format and didnt work/i didnt know how to apply them. This is from a YT tutorial btw and im completely new to web dev so im pretty lost here. Any workaround to this?

Upvotes: 2

Views: 5149

Answers (2)

Ro Milton
Ro Milton

Reputation: 2536

onSuccess and onError were removed from useQuery() from v5. The reasons are explained here.

I'm not familiar with the trpc.authCallback, I don't understand why you have no query function but looks like you're using useQuery() which is a mistake. Logging in or creating an account is a mutation, not a query because you're mutating some data on the back end.

Use useMutation() instead of useQuery(), it makes more sense and you can still use onSuccess and onError.

Upvotes: 3

Raj Randive
Raj Randive

Reputation: 34

onSuccess and onError were removed from useQuery() from v5. The reasons are explained here.

You can use useEffect hook instead. Following is the code how use can use useEffect in this scenario.

const { data, isLoading, error } = trpc.authCallback.useQuery(undefined, {
        retry: true,
        retryDelay: 500,
    })

    useEffect(() => {
        if (data) {
            const { success } = data
            if (success) {
                // user is synced to db
                console.log('Data fetched successfully:', data);
                router.push(origin ? `/${origin}` : '/dashboard')
            }
        }
        else if (error) {
            if (error.data?.code === 'UNAUTHORIZED') {
                router.push('/sign-in')
            }
        }

    }, [data, origin, router, error]);

Upvotes: 1

Related Questions