correct-apricot

Infinite loop with Hydration Boundary and Next.js 14 App Router

Hey, I'm trying some prefetching with app router but I've got infinite loop error like on the screen. Here is code:

export default async function OrganizationUsers() {
    console.log('in page');
    const queryClient = new QueryClient();

    const cookie = cookies();
    const allCookies = cookie.getAll();
    const requestCookie = allCookies
        .map((cookie, i) =>
            i === allCookies.length - 1 ? `${cookie.name}=${cookie.value}` : `${cookie.name}=${cookie.value};`,
        )
        .join(' ');

    await queryClient.prefetchQuery({
        queryKey: [USE_ORGANIZATION_USERS_QUERY_KEY, 1],
        queryFn: () => getOrganizationMembersRequest(1, requestCookie),
        retry: false,
        staleTime: 60 * 1000,
    });

    console.log('after request');

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <OrganizationUsersTable></OrganizationUsersTable>
        </HydrationBoundary>
    );
}

export default async function OrganizationUsers() {
    console.log('in page');
    const queryClient = new QueryClient();

    const cookie = cookies();
    const allCookies = cookie.getAll();
    const requestCookie = allCookies
        .map((cookie, i) =>
            i === allCookies.length - 1 ? `${cookie.name}=${cookie.value}` : `${cookie.name}=${cookie.value};`,
        )
        .join(' ');

    await queryClient.prefetchQuery({
        queryKey: [USE_ORGANIZATION_USERS_QUERY_KEY, 1],
        queryFn: () => getOrganizationMembersRequest(1, requestCookie),
        retry: false,
        staleTime: 60 * 1000,
    });

    console.log('after request');

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <OrganizationUsersTable></OrganizationUsersTable>
        </HydrationBoundary>
    );
}

When I comment out prefetchQuery part, everything works fine. It seems like HydrationBoundary have some problem with hydrating data. Here are my console.logs:

@mazuma/client: in page
@mazuma/client: in request
@mazuma/server: Response: 200 2.302 ms
@mazuma/client: in request after
@mazuma/client: after request
@mazuma/client:  ⨯ RangeError: Maximum call stack size exceeded
@mazuma/client:     at String.replace (<anonymous>)
@mazuma/client:  ⨯ RangeError: Maximum call stack size exceeded
@mazuma/client:     at String.replace (<anonymous>)
@mazuma/client: digest: "2489343400"

@mazuma/client: in page
@mazuma/client: in request
@mazuma/server: Response: 200 2.302 ms
@mazuma/client: in request after
@mazuma/client: after request
@mazuma/client:  ⨯ RangeError: Maximum call stack size exceeded
@mazuma/client:     at String.replace (<anonymous>)
@mazuma/client:  ⨯ RangeError: Maximum call stack size exceeded
@mazuma/client:     at String.replace (<anonymous>)
@mazuma/client: digest: "2489343400"

I was following documentation and I don't see obvious error, can someone help me? OrganizationUsersTable is empty component with "use client". I have other client query in the application and it works fine so I assume it's not the problem with my setup or something related to queryClient. OrganizationUsers component is of course page.tsx file in my directory structure.

2 Replies

correct-apricotOP•16mo ago

I think I found an answer: queryFn: () => getOrganizationMembersRequest(1, requestCookie) returns whole axios response. When I return just response.data it suddenly works, but I don't know why. Anyone has answer?

like-gold•16mo ago

probably something inside the axios response is circular and next can't serialize this

Gaming

Programming

Infinite loop with Hydration Boundary and Next.js 14 App Router

Did you find this page helpful?