Issue with onSuccess callback in Next.js useQuery hook from trpc.authCallback

I'm encountering an error while attempting to use the onSuccess callback with the useQuery hook from trpc.authCallback in a Next.js application. Despite explicitly defining the type for the success parameter within the callback, TypeScript throws an error stating that onSuccess does not exist in the provided options for useQuery.

Here's my code:

import { useRouter, useSearchParams } from "next/navigation";
import { trpc } from "../_trpc/client";

const Page = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const origin = searchParams.get("origin");
  
  const { data, isLoading } = trpc.authCallback.useQuery(undefined, {
    // Explicitly define the type for success to resolve TypeScript error
    onSuccess: ({ success }: { success: boolean }) => {
      if (success) {
        router.push(origin ? `/${origin}` : '/dashboard');
      }
    }
  });

  return null; // or any loading indicator
};

export default Page;

The error message I'm receiving is:

No overload matches this call.
Overload 1 of 2, '(input: void | typeof skipToken, 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 | typeof skipToken, opts?: UseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ input: void; output: { success: boolean; }; transformer: false; errorShape: DefaultErrorShape; }>, { ...; }> | undefined): UseTRPCQueryResult<...>', gave the following error.
Object literal may only specify known properties, and 'onSuccess' does not exist in type 'UseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ input: void; output: { success: boolean; }; transformer: false; errorShape: DefaultErrorShape; }>, { ...; }>'.ts(2769)
(property) onSuccess: ({ success }: {
    success: boolean;
}) => void

How can I resolve this issue and successfully use the onSuccess callback with the useQuery hook in my Next.js application? Thank you for your help!

What I've tried:

I've explicitly defined the type for the success parameter within the onSuccess callback. I've reviewed the documentation for trpc.authCallback.useQuery to see if there are any specific requirements for using the onSuccess callback. I've searched online for similar issues but couldn't find a solution.

What I was expecting:

I expected that by explicitly defining the type for success within the onSuccess callback, TypeScript would recognize it correctly, and the code would work without any errors.

Solution

Okay, I think I know the problem you're running into. The @tanstack/react-query package from the tutorial you're using is v4. Since v5, the three callbacks onSuccess, onError and onSettled are removed as mentioned in the blog post by tkkudo - the co-maintainer of the project. You can take a look at his blog post (highly recommended)

https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

So, the fix for your problem might be: Instead of calling onSuccess (which was deprecated), you can try something like:

Edit: I realized that you can access isSuccess, isError, isPending. I think this is much cleaner.

const { data, isLoading, isError, isSuccess } = trpc.authCallback.useQuery(); if (isSuccess) {//Your code} if (isError) {//Your code}

Edit: You can also install the old package if you like to follow exactly the video.