React-Query getstaticprops useInfiniteQuery

Question

Trying to fetch paginated data using useInfinitQuery from react-query package but no data fetched and displayed in react-query-devtools.

Page.tsx

export async function getStaticProps(): Promise<
  GetStaticPropsResult<{ dehydratedState: DehydratedState }>
> {
  await queryClient.prefetchInfiniteQuery(['randomVideos'], fetchRandomVideos);
return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient)))
    },
    revalidate: 60 * 60
  };
}

Requests.ts

export function fetchRandomVideos({ pageParam = 1 }) {
  return Request.get<PaginatedResponseBody<TRandomVideo>>(
    endpoints.RANDOM_VIDEOS,
    {
      params: {
        page: pageParam,
        per_page: 10
      }
    }
  );
}

export function useRandomVideosQuery() {
  return useInfiniteQuery(
    ['randomVideos'],
    ({ pageParam }) => fetchRandomVideos({ pageParam })(),
    {
      getNextPageParam: (lastPageData) => lastPageData?.data.next_page_url
    }
  );
}

What is the issue?

Answer 1

 await queryClient.prefetchInfiniteQuery(['randomVideos'], () =>
    fetchRandomVideos({ pageParam: 1 })()
  );