SuspenseBoundary + multiple useQuery suspense:true - API calls are sequential

[csantos-nydig]

I'm opening this as a discussion instead of as an issue because it's probably that I don't understand Suspense correctly; but still looking for some help if possible 🙏

Codesandbox

https://codesandbox.io/p/sandbox/react-query-suspense-forked-27twcw

Expected behavior

I was expecting the API calls to be dispatched in parallel, and the Suspense boundary will be resolved once all of them had resolved.

Current behavior

It's quite different to what I expected. the 3 API calls are executed sequentially; which makes the user stay in the "Loading..." state for longer than expected.

Notes

• Worth to mention; these 3 queries are not dependent to each other
• I get the same "waterfall" execution using useSuspenseQuery
• useQueries does make them run in parallel (see codesandbox), so I'd have expected to be have the same for useQuery

[TkDodo]

that's how suspense works. React sees that one hook wants to suspend, so it does. It doesn't know that there will be another hook that suspends. To get that, you'd need to split the useQuery calls up into multiple components, because they run in parallel in the same boundary. useQueries also fixes this.

See: https://tkdodo.eu/blog/seeding-the-query-cache#suspense-waterfalls

[csantos-nydig]

Thanks for your help @TkDodo and for the link 🙏