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

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 async function generateMetadata({
  params,
}: {
  params: { reference: number };
}): Promise<Metadata> {
  const listing = await fetchListingByReference({
    queryKey: ["listing", params.reference],
  });

  return generateListingMetaTags(listing);
}