Is there an elegant way to invoke multiple query parallel when used with the suspense option?

[p-iknow]

Reproduce & Reference

• repo
• codesandbox

Question

Is there an elegant way to invoke multiple query parallel when used with the suspense option?
I am achieving my goal by calling useQuery without a suspense option first as below temporarily. But this doesn't seem like a very elegant way. react-query-suspense-parallel - code sandbox

Background

I didn't want to express the components for the error and loading status as below. - react-query-without-suspense-option - code sandbox

I wanted to express the error and loading status more declaratively. Thus, this was achieved through AsyncBoundary, which combines Suspense and ErrorBoundary. - react-query-suspense-sequential

Everything seemed to go my way. But there was a price for using the suspense option. Since suspense internally throw promise, it blocks another api call until one api call is completed. So if I look at the network waterfall, I can see that the api is called sequentially as shown below.

As a way to solve the above problem, I decided to run the useQuery without the suspense option on the root before the useQuery using the suspense option on the sub-component is executed.


In this way, the api is called parallelly. However, this method seems to be a temporary measure and not an elegant one. Is there a better way to achieve my goal?

Requirements

• You have to use the suspense option.
• It should be possible to call the api in parallel.

What I read before ask

• suspense is not working for useQueries #1523
• new useQueries API #2923 (comment)

[TkDodo]

In this way, the api is called parallelly. However, this method seems to be a temporary measure and not an elegant one. Is there a better way to achieve my goal?

I would like to get support for suspense on useQueries, but it's a long standing, open issue. What I think would need to happen is:

• go through the useQueries array and try to find all queries that have suspense on
• trigger a fetch for all non-suspense queries, e.g. with queryClient.prefetchQueries
• throw a new Promise with Promise.allSettled that contains the promises of all the queries created with observer.fetchOptimistic

I think what should happen then is that react suspends until all suspense queries have finished, while the non-suspense queries just run normally next to it. If you want to contribute, please give this a try :)