T
TanStack•11mo ago
fascinating-indigo

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>
    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,
    });
    const {data: balance} = useQuery({
        queryKey: [QUERY_KEYS.BALANCE],
        queryFn: getBalance,
    });

    const {data: playerInfo} = useQuery({
        queryKey: [QUERY_KEYS.USER],
        queryFn: getPlayerInfo,
    });
1 Reply
optimistic-gold
optimistic-gold•11mo ago
Think you have to dehydrate the client after the prefetchQuery s

Did you find this page helpful?