mutation taking a long time to appear after prefetching query

Hello,

I'm am currently having an issue where if my isCaptchaValidisCaptchaValid endpoint errors (using throw new TRPCError(...)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 prefetchprefetch and in the client component you can see I am using useQueryuseQuery, 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>
};

mutation taking a long time to appear after prefetching query

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

mutation taking a long time to appear after prefetching query

mutation taking a long time to appear after prefetching query

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads