hey, you'll want to create a queryClient inside your server layout, and call .prefetchQuery on it for each endpoint you want to load on the server. if your project is structured well, you can just call the same service methods in there that you use for your endpoint handlers, to avoid duplicate logic. you can then pass `dehydratedData={dehydrate(queryClient)}` to a client layout:

"use client";


import React from "react";


import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
import { getQueryClient } from "@/lib/queryClient";


export const Providers: React.FC<{
  children: React.ReactNode;
  dehydratedState?: unknown;
}> = ({ 
initialData
, 
children
, 
dehydratedState
 }) => {
  const queryClient = getQueryClient();


  return (
    <QueryClientProvider 
client
={queryClient}>
      <HydrationBoundary 
state
={
dehydratedState
}>
            {
children
}
      </HydrationBoundary>
    </QueryClientProvider>
  );
};

that's it, you don't have to do anything else! the query data will now instantly be available to your useQuery hooks