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

[vishalthomas699]

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

[anthoturc]

Edit: It seems like more needs to be done to get the useMutation option to work. I am not sure why I can't consistently get signed in. I would use one of the useQuery options above (not a huge deal imo).

---

Hey folks, I just thought I'd add my two cents while going through the auth-callback portion of the video.

You can effectively get the same behavior on the latest ReactQuery (i.e. not what is used in the video), by switching to useMutation

Here is an example:

trpc.authCallback.useMutation({
  onSuccess: async ({ success }) => {
    if (success) {
      router.push(origin ? `/${origin}` : '/dashboard');
    }
  },
  onError: async (err) => {
    if (err.data?.code === 'UNAUTHORIZED') {
      router.push('/login'); // this get's pointed to something else in my next config
    }
  },
  retry: 4,
  retryDelay: 2000,
});

Then within the app router, you'd need to switch the public procedure to a mutation.

authCallback: publicProcedure.mutation(async () => { ... })

Use mutation feels a little more natural here IMO but I was able to avoid useEffect -- not that it's a bad thing.