T
TanStack3y ago
afraid-scarlet

How to set up dependent queries with Suspense

Normally, to create dependent queries, you need to use the "enabled" option. But in the case of Suspense queries, you can't change this option. So, is it possible to make dependent queries while using Suspense?
4 Replies
foreign-sapphire
foreign-sapphire3y ago
they are dependent per default:
const { data } = useSuspenseQuery(...)
const { data } = useSuspenseQuery(...)
after that, data is guaranteed to be defined, so you can pass it to another query without needing to enable / disable something it's one of the gotchas that if you call useSuspenseQuery twice in a component, it will waterfall and not fetch in parallel. It's how suspense is designed (from react, not from us 😅 )
afraid-scarlet
afraid-scarletOP3y ago
In the end, it's so easy to use that I didn't even want to think it could work 😆 Thank you very much! With useSuspenseQueries, are requests also made in waterfall?
foreign-sapphire
foreign-sapphire3y ago
no, they run in parallel. We put them in a Promise.all() this is the way to get parallel fetching back into one component; its not very intuitive that calling useSuspenseQuery twice in the same component creates a waterfall, but it works fine if its two different components 🤷‍♂️
afraid-scarlet
afraid-scarletOP3y ago
Awesome, thank you!

Did you find this page helpful?