TanStackT
TanStack•13mo ago•
1 reply
verbal-lime

prefetchQuery x next.js server side

Hey guys, I am using prefetchQuery in my Next.js app, but for some reason, instead of the data being instantly accessbile on the client, it actually returns undefined and then the data

can someone help me? 🙂
server component:
    const queryClient = getQueryClient();
    const dehydratedState = dehydrate(queryClient);

    await Promise.all([
        queryClient.prefetchQuery({
            queryKey: [QUERY_KEYS.BALANCE],
            queryFn: getBalance,
        }),
        queryClient.prefetchQuery({
            queryKey: [QUERY_KEYS.USER],
            queryFn: getPlayerInfo,
        }),
    ]);

return (
     <HydrationBoundary state={dehydratedState}>
            <header className="w-full relative bg-pink-400 z-[1] flex justify-center items-center" id="lb-header">
                <Child />
            </header>
        </HydrationBoundary>

in the child it is just a normal query:
    const {data: balance} = useQuery({
        queryKey: [QUERY_KEYS.BALANCE],
        queryFn: getBalance,
    });

    const {data: playerInfo} = useQuery({
        queryKey: [QUERY_KEYS.USER],
        queryFn: getPlayerInfo,
    });
Was this page helpful?