Peform•2d ago

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>
    );
}

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>
};

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>
};

1 Reply

PeformOP•2d ago

im just so confused, because the query knows it errored, but <hydrateclient> isn't passing the error object down to the client A demonstration of the issue: https://gyazo.com/610a1e2d835445e70fd2400812cad7c9

Gyazo

Gyazo Screen Video

mutation taking a long time to appear after prefetching query

Did you find this page helpful?