PeformP
tRPC•9mo ago•
2 replies
Peform

mutation taking a long time to appear after prefetching query

Hello,

I'm am currently having an issue where if my isCaptchaValid endpoint errors (using throw new TRPCError(...)) the error message takes a long time to come through, it appears that it is linked to the endpoints execution time, as if I add some code to wait 2 seconds before executing it dramatically increases the time it takes for the error to come back.

I am using nextjs loading.tsx which is how the loading animation works, so as soon as the loading animation is gone it means that TRPC data has finished fetching, so the error message should be appearing instantly?

In the below server component you can see I am using prefetch and in the client component you can see I am using 
useQuery
, which should not be refetching on first render since I used prefetch function.

Server component:
export default async function Page({ params }: Props) {
    const { guildId, uuid } = await params;
    const session = await auth();
    await api.verification.isCaptchaValid.prefetch({ guildId, uuid });
    if (!session?.user.accountProviderId) redirect(`/login?callbackUrl=/verify/${guildId}/${uuid}`);

    return (
        <HydrateClient>
            <div className="container flex flex-1 items-center justify-center">
                <Content guildId={guildId} uuid={uuid} />
            </div>
        </HydrateClient>
    );
}

client component:
export const Content = ({ guildId, uuid }: Props) => {
    const { data: isCaptchaValid, error: invalidCaptchaError } = api.verification.isCaptchaValid.useQuery({
        guildId,
        uuid,
    });

    if (!isCaptchaValid)
        return (
            <div className="flex items-center gap-5">
                <UserXIcon className="h-12 w-12 text-destructive" />
                <div>
                    <h1 className="text-2xl font-semibold">Invalid Captcha</h1>
                    <p>{invalidCaptchaError?.message}</p>
                </div>
            </div>
        );

    return <h1>Success</h1>
};
Was this page helpful?