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

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

prefetchQuery

prefetchQuery

prefetchQuery part, everything works fine. It seems like

HydrationBoundary

HydrationBoundary

HydrationBoundary

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"

@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.

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

Similar Threads

Similar Threads

Similar Threads