useSuspenseQuery Next.js app router dependent prefetches

[Antignote]

I have a cese where I'm using useSuspenseQuery with prefetching serverside as in the advanced docs, where I want to prefetch a query where I don't know what id to fetch from the API, therefore I want to do a another API call before the prefetch query to lookup what id to prefetch. The prefetch is later consumed by a client component via useSuspenseQuery.

This indeed creates a waterfall where the prefetch cannot start until the first API call is settled (awaited), ie. the pre-fetches are dependent. This also causes issues for parallel routes which is also dependent on the prefetched data where they will switch over to client fetch since there is no pending promise because the HydrationBoundary is delayed by the first fetch.

What is the recommended approach to prefetch data where the query keys is unknown but preferably should end up in the right cache entry in the QueryClientProvider ?

I've created a quick example on codesandbox.io where the AsyncPrefetchServerComponent should mimic the dependent fetch via the wait function

Thanks in advance!

[Antignote]

EDIT: I found this discussion which is similar to what I'm trying to achieve, but it is unanswered. Is there any recommandations?