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!