import { HydrationBoundary } from '@tanstack/react-query';
import Question from '@/components/question/index';
import { api, apiPath } from '@/lib/api';
import usePrefetchQuery from '@/hooks/usePreFetchQuery';

export async function generateMetadata({ params, searchParams }, parent) {
  const slug = params.slug
  const response = await api.get(apiPath.getQuestion(slug));
  return {
    title: response.data.question,
    description: response.data.question,
  }
}


export default async function Page({ params }) {

  const slug = params.slug;
  const dehydratedState = await usePrefetchQuery({
    queryKey: ['QUESTION', slug],
    queryFn: async () => {
      const response = await api.get(apiPath.getQuestion(slug));
      return response.data.question;
    }
  })

  return (
    <main>
      <h1 className='mt-10 p-10 w-full m-auto text-center border rounded-full' >
        Question Page
      </h1>
      <HydrationBoundary state={dehydratedState}>
        <Question />
      </HydrationBoundary>
    </main>
  )
}

it seems there are 2 seperate requests here one from generateMetaData and other inside the page component, so like fetch shouldnt there be 1 request ?
is there any better way to set dynamic meta data when using react query maybe ?
NOTE that the api is an axios instance.