Regarding onSuccess from quill/src/app/auth-callback /page.tsx

[Raj-G07]

trpc.authCallback.useQuery(undefined,{
onSuccess: ({success}) => {
if (success) {
// user is synced to db
router.push(origin ? /${origin} : '/dashboard')
}
},
On hovering onSuccess this show
No overload matches this call.
Overload 1 of 2, '(input: void, opts: DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { ...; }>): DefinedUseTRPCQueryResult<...>', gave the following error.
Object literal may only specify known properties, and 'onSuccess' does not exist in type 'DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { success: boolean; }>'.

[farnell]

two options

1. downgrade to ReactQuery 4
   pnpm add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query@^4.18.0 zod

or

2. useEffect in the auth-callback

 const authCallbackQuery = trpc.authCallback.useQuery(undefined, {
    retry: true,
    retryDelay: 500,
  });

  // Handle success
  useEffect(() => {
    if (authCallbackQuery.data?.success) {
      router.push(origin ? `/${origin}` : "/dashboard");
    }
  }, [authCallbackQuery.data, router, origin]);

  // Handle error
  useEffect(() => {
    if (authCallbackQuery.error?.data?.code === "UNAUTHORIZED") {
      router.push("/sign-in");
    }
  }, [authCallbackQuery.error, router]);

[jwalishjoseph]

[Sujan1714]

same issue

No overload matches this call.
Overload 1 of 2, '(input: void, opts: DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { ...; }>): DefinedUseTRPCQueryResult<...>', gave the following error.
Object literal may only specify known properties, and 'onSuccess' does not exist in type 'DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { success: boolean; }>'.
Overload 2 of 2, '(input: void, opts?: UseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ input: void; output: { success: boolean; }; transformer: false; errorShape: DefaultErrorShape; }>, { ...; }> | undefined):

[georgrch]

This worked for me (useEffect, like @farnell mentioned)

"use client"

import { useEffect } from 'react'; // Import useEffect
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')

  // Store the query result in a variable
  const { data, error, isSuccess, isError } = trpc.authCallback.useQuery(undefined, {
    retry: true,
    retryDelay: 500,
  });

  // Handle success in useEffect
  useEffect(() => {
    if (isSuccess && data?.success) {
      router.push(origin ? `/${origin}` : '/dashboard');
    }
  }, [isSuccess, data, router, origin]);

  // Handle error in useEffect
  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

[vishaldml12]

This worked for me (useEffect, like @farnell mentioned)

"use client"

import { useEffect } from 'react'; // Import useEffect
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')

  // Store the query result in a variable
  const { data, error, isSuccess, isError } = trpc.authCallback.useQuery(undefined, {
    retry: true,
    retryDelay: 500,
  });

  // Handle success in useEffect
  useEffect(() => {
    if (isSuccess && data?.success) {
      router.push(origin ? `/${origin}` : '/dashboard');
    }
  }, [isSuccess, data, router, origin]);

  // Handle error in useEffect
  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

Thank You , Error Solved

[nitives]

This worked for me (useEffect, like @farnell mentioned)

"use client"

import { useEffect } from 'react'; // Import useEffect
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')

  // Store the query result in a variable
  const { data, error, isSuccess, isError } = trpc.authCallback.useQuery(undefined, {
    retry: true,
    retryDelay: 500,
  });

  // Handle success in useEffect
  useEffect(() => {
    if (isSuccess && data?.success) {
      router.push(origin ? `/${origin}` : '/dashboard');
    }
  }, [isSuccess, data, router, origin]);

  // Handle error in useEffect
  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

MMMM THANK U THIS WORKED