Encountering an issue with the onSuccess callback and useQuery hook from trpc.authCallback in a Next.js app. Despite defining the success parameter type, TypeScript throws an error claiming onSuccess is not found in provided options.
My code snippet:
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 type for success to fix TypeScript error
onSuccess: ({ success }: { success: boolean }) => {
if (success) {
router.push(origin ? `/${origin}` : '/dashboard');
}
}
});
return null; // could also show loading indicator here
};
export default Page;
The error message states:
No overload matches this call.
...
(property) onSuccess: ({ success }: {
success: boolean;
}) => void
How can I resolve this issue and successfully implement the onSuccess callback with the useQuery hook in my Next.js application? Appreciate any assistance!
Attempts made:
Defined the success parameter type within the onSuccess callback. Reviewed trpc.authCallback.useQuery documentation for specific requirements regarding onSuccess. Searched online for similar issues but found no solution.
Expectations:
Expected that by specifying the success type in the onSuccess callback, TypeScript would recognize it correctly and run the code without errors.