mutation taking a long time to appear after prefetching query

Hello,

I'm am currently having an issue where if my

isCaptchaValid

isCaptchaValid

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

prefetch

prefetch

and in the client component you can see I am using

useQuery

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

mutation taking a long time to appear after prefetching query

Hello,

I'm am currently having an issue where if my

isCaptchaValid

isCaptchaValid

endpoint errors (using

throw new TRPCError(...)

throw new TRPCError(...)

prefetch

prefetch

and in the client component you can see I am using

useQuery

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

mutation taking a long time to appear after prefetching query

Similar Threads

mutation taking a long time to appear after prefetching query

Similar Threads

Similar Threads

Similar Threads