Next.js Discord

Discord Forum

React Query State Management for both Server and Client Components

Unanswered
Hokkaido posted this in #help-forum
Open in Discord
HokkaidoOP
import { fetchSessionUser } from "@/services/auth/sessions";
import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ["user_session"],
    queryFn: fetchSessionUser,
  });

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

Will the above work
I'm trying to use React Query to make user session state available throughout the application in both Server Components and in Client Components

0 Replies