Hydrating tanstack-query, data shared to every user

Question

export default async function RootLayout({
                                       children,
                                   }: Readonly<{
    children: React.ReactNode;
}>) {
    const cookieStore = await cookies();
    const authToken = cookieStore.get("auth")?.value;

    const queryClient = new QueryClient();

    const userData = (await backendFetchClient.GET("/user", {
        headers: {
            Authorization: `Bearer ${authToken}`,
        },
        cache: 'no-store'
    })).data;

    if (userData) {
        await queryClient.prefetchQuery({
            queryKey: ["get", "/user", null],
            queryFn: async () => userData
        });
    }

    return (
        <html lang="en" suppressHydrationWarning>
        <body>
          <LayoutProvider>
            <HydrationBoundary state={dehydrate(queryClient)}>
              <ThemeProvider attribute="class">
....

This causes that the first user to login to have a correctly rendered page, but if I open the homepage in incognito, for a second it displays the user from the original session until tanstack refreshes the user on the client and causing a hydration error

Hydrating tanstack-query, data shared to every user

0 Replies