如何在下一个JS中使用React查询来使下一步的依赖性服务器查询？

Question

我正在尝试使用React Query的UseInfiniteQuery Hook来制作API获取请求，该挂钩使用了查询字符串中下一个auth会话令牌中的数据。

我在/api/auth/[... nextauth.ts]中有一个回调，将额外的用户> userdata发送到我的会话令牌。

客户端有两个相关页面。让我们称它们为/pages/index.tsx和/hooks/useapidata.ts。出于所有意图和目的，这就是他们的样子：

// pages/index.tsx

export default function Page() {
   const {data, fetchNextPage, isLoading, isError} = useCourseData()

   if (isLoading) return <main />

   return <main>
      <InfiniteScroller fetchMore={fetchNextPage}>
         {data?.pages?.map(page => page?.results?.map(item: string => item))}
      </InfiniteScroller>
   </main>
}

// hooks/useApiData.ts

async function fetchPage(pageParam: string) {
   const response = await fetch(pageParam)
   return await response.json()
}

export default function useApiData() {
   const {data: session} = useSession()

   const init = `/api?userData=${session?.user?.userData}`
   
   return useInfiniteQuery('query',
      ({pageParam = init}) => fetchPage(pageParam),
      {getNextPageParam: prevPage => prevPage.next ?? undefined}
   )
}

我的初始请求以/api？userData = undefined发送到API。额外的数据肯定正在进入令牌。

我可以通过/pages/index.tsx的渲染函数将数据放在DOM中，因此我认为问题与在会话上下文准备好之前运行的自定义挂钩有关或类似的东西...我不了解钩子的机制，足以弄清楚这一点。

我一直在寻找很长时间的答案，而且我很惊讶没有找到一个有同样问题的人。这些不是不受欢迎的包裹，我想很多人都在使用它们来实现我在这里尝试的目标，所以我认为我必须做一些特别愚蠢的事情。但是什么？

如何将我的下一个验证会话中的数据获取到我的React查询请求中？对于奖励积分，为什么在我的自定义挂钩中发送请求时会话数据不可用？