Component Composition with useSuspenseQuery results in request waterfall

[factblock-kyle]

Hi, I am creating an application and am using a single Suspense boundary for my whole page. I have multiple different components, each using 'useSuspenseQuery' hook for api requests. Following the official documentation,

it states that 'orchestrate your own parallelism with separate components for each useSuspenseQuery instance'. However, in my component it is resulting in request waterfall. I was wondering what could be the issue? My guess is that when the first component throws the promise, the Suspense catches this and suspends the whole page, blocking the execution of the second component from running(which calls useSuspenseQuery), but the docs and the blog says otherwise.

I am using :
"react": "^18.3.1",
"next": "^14.2.4",
"@tanstack/react-query": "^5.51.16",
"axios": "^1.7.2",

code example
<Suspense fallback={<IcSpinner />}> <ComponentAWhichUsesSuspenseQuery /> <ComponentBWhichUsesSuspenseQuery /> </Suspense>

[TkDodo]

Your code example should fire in parallel, except if you running on React v19-rc.1, because it introduced an issue where those were fetched in serial. This was fixed with the stable version of v19 though. Please show a stackblitz or codesandbox reproduction.

[factblock-kyle]

Hi! Thank you for your reply. This is the reproduction.
https://stackblitz.com/~/github.com/factblock-kyle/suspenseQuery

[TkDodo]

Oh I think next14 will use the React 19 canary versions (no matter which version of react you have specified!), so it’s possible that they have this exact suspense issue. I’d recommend updating next.

Also, using suspense during SSR without prefetching or our experimental streamed hydration means requests will run on the server, but won’t wind up in the client cache, so they have to run again on the client.