T
TanStack•13mo ago
secure-lavender

Can I use useQuery in next.js server component to populate generateMetadata and hydrate client?

I have a Server component that follows the documentation to prefetch a query and hydrates it in my page.tsx: 
export default async function ListingDetailPage({
  params,
}: {
  params: { reference: number };
}) {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["listing", params.reference],
    queryFn: fetchListingByReference,
    staleTime: 1000 * 60 * 5,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ClientPage />
    </HydrationBoundary>
  );
}
export default async function ListingDetailPage({
  params,
}: {
  params: { reference: number };
}) {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["listing", params.reference],
    queryFn: fetchListingByReference,
    staleTime: 1000 * 60 * 5,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ClientPage />
    </HydrationBoundary>
  );
}
I am also using the Next.JS generateMetadata function in the same page.tsx file to generate the metadata: 
export async function generateMetadata({
  params,
}: {
  params: { reference: number };
}): Promise<Metadata> {
  const listing = await fetchListingByReference({
    queryKey: ["listing", params.reference],
  });

  return generateListingMetaTags(listing);
}
export async function generateMetadata({
  params,
}: {
  params: { reference: number };
}): Promise<Metadata> {
  const listing = await fetchListingByReference({
    queryKey: ["listing", params.reference],
  });

  return generateListingMetaTags(listing);
}
Is there any way to only run fetchListingByReference once on the server and have it cached across requests, to both generate the metadata and hydrate the client? From the documentation I understand that prefetchQuery does not return the data. So can I run useQuery instead of prefetchQuery and use that to hydrate the client? And then how can I run it once to use the same in generatemetadata? Do I just run useQuery again in the generateMetadata function and it will only run once? Also, is there a way to see whether a query was prefetched successfully in the react query dev tool?
4 Replies
stormy-gold
stormy-gold•13mo ago
you would need to use the same queryClient
secure-lavender
secure-lavenderOP•13mo ago
Excuse me if the questions are silly, but I am new to next.js and react router and I am confused about some aspects of it. Here my questions: 1. Does using the same query client mean that I simply define a new query queryclient outside of the two functions const queryClient = new QueryClient() or should I use the cache example of using a single queryclient: const getQueryClient = cache(() => new QueryClient()) and then use that function to get the query client? 2. Besides only fetching the data once to populate the metadata and passing the data to the client component, I would also like to avoid loading this data again for every request. So I would like to e.g. cache the listings on the server for 30 minutes and every user visiting the page would be served the same data without the server fetching the data again. Would this be achieved with either option in question 1 and defining a 30mins stale time? Or do I need to rely on next.js fetch caching to not hit my api again? 3. Since I want to use the data, I need to use useQuery instead of prefetchQuery, correct? Can I dehydrate a query object returned by useQuery just as I would with prefetchQuery? Or if I have to still use useQuery and prefetchQuery in this case, would it then avoid sending the same request twice?
stormy-gold
stormy-gold•13mo ago
1. probably with cache 2. persistent caching on the server is a completely different beast. You'd need something like cachified. 3. in the server component, you prefetchQuery. In the client component, you useQuery
secure-lavender
secure-lavenderOP•13mo ago
Got it thanks, appreciate the help!

Did you find this page helpful?