Nextjs 14 + Server actions + React Query 5: How to handle query inside generateMetadata?

[capsule5]

Hey!

I've followed this approach : https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr

But I'm not sure how to do If I need to make a query inside generateMetadata

Here is how I do:

// imports...

// The params we use for initial data fetching
const params: getOrdersParams = { limit: 10, orderBy: 'desc' }
const queryClient = getQueryClient()

export async function generateMetadata(): Promise<Metadata> {
  const data = await queryClient.fetchQuery({
    queryKey: ['orders', params],
    queryFn: () => getOrders(params),
  })

  return {
    title: "title" + data.size,
  }
}

export default async function Page() {
  await queryClient.prefetchQuery({
    queryKey: ['orders', params],
    queryFn: () => getOrders(params),
  })

  return (
      <HydrationBoundary state={dehydrate(queryClient)}>
        <SomeClientComponent getOrders={getOrders} params={params} />
      </HydrationBoundary>
  )
}

getOrders does a fetch:

export async function getOrders(
  params?: getOrdersParams
): Promise<OrdersResponse> {
  const endPoint = 'orders'
  const accessToken = await getAccessToken()
  const headers = getHeaders(accessToken)

  try {
    const queryParams = params ? getOrdersURLSearchParams(params) : ''
    const url = `${process.env.NEXT_PUBLIC_API_URL}/${endPoint}${queryParams}`
    const res = await fetch(url, { headers })

    if (!res.ok) {
      throw new Error(`Failed to fetch orders | status : ${res.status}`)
    }

    const data = await res.json()

    if (!data.results) {
      throw new Error('No results found in the response')
    }

    return data
  } catch (error) {
    throw new Error(`Failed to fetch orders : ${error}`)
  }
}

Is it a good approach?
And how's caching handled since I use both react-query and next/fetch?

Thanks for helping me here!

[TkDodo]

Is it a good approach?

I don't know when generateMetaData is invoked, but if it works, sure.

And how's caching handled since I use both react-query and next/fetch?

queryClient.fetchQuery and queryClient.prefetchQuery will trigger a new call to the queryFn unless there is fresh data in the cache.

[shawnmclean]

How does one handle a not found error from fetchQuery inside this getMetadata function?

Also how does one handle a not found in the prefetch query? What if I want to redirect to a 404? Where does this logic go?

And how's caching handled since I use both react-query and next/fetch?

next will cache the fetch calls for the same server route request.

[YusufcanY]

For not found metadata case, I did something like below. It's works fine for me. Also for 404 redirect I'm handling on client-side. Nothing to do with server-side. I hope it helps. For any questions let me know.

export async function generateMetadata({
  params,
}: {
  params: { restaurant: string };
}): Promise<Metadata> {
  try {
    const data = await queryClient.fetchQuery({
      queryKey: [
        "restaurant",
        params.restaurant
      ],
      queryFn: () =>
        RestaurantService.getRestaurantAndCategories(params.restaurant),
    });
    return {
      title: data.name + " - Bla Bla",
      description: data.description,
    };
  } catch {
    return {
      title: "404 - Bla Bla",
      description: "The restaurant you are looking for does not exist.",
    };
  }
}

[shawnmclean]

Thanks, I did somethign similar.

I ended up doing something like this:

const retreiveInfo = cache(() => { 

try {
   return await getInfoOrThrow();
} catch {
   return notFound()
}
})

export async function generateMetadata() {
   const info = await  retreiveInfo()

   return { title: info.title }
}

export default async function Page() {
   const info = await retreiveInfo()

   return <div> {info.title}</div>
}

So a shared cached retrieve function that is called by both metadata and page.

We can throw the notfound there.

Example:

https://github.com/shawnmclean/sovoli/blob/main/apps/sovoli.com/src/app/(platform)/(profile)/%5Busername%5D/%5Bslug%5D/page.tsx#L252-L319