Suspense queries not runing in serial in v5 beta (after replacing dependant queries)

[igortas]

Hi,

I've tried to replace dependant queries with suspense one. I have lazy loaded component, I've added <Suspense /> component on top of my component. The problem now I have is that, in the dependant version of the queries, for the second query, the enabled prop relies on store data available, before it fires the API endpoint. The store data is dispatched when onSuccess is true fromuseEffect in the first query.

In suspense version of the queries, the second query never waits the first query to finish, useEffect is changed a bit (as onSuccess is missing) in the first query, to check if the data is available so can dispatch the data to the store, which never happens.

First like query defined in the dependant version:

const { data, isSuccess } = useQuery()

useEffect(() => {
 if (isSuccess) {
 dispatch(data[0])
}
})

Replacing dependant queries like:

const data = useStore();
useQuery({  queryKey: 'xyz' })
useQuery({ queryKey: 'abc' enabled: !!data })

to suspense version like:

useSuspenseQuery({  queryKey: 'xyz' }) 
useSuspenseQuery({ queryKey: 'abc' })

[TkDodo]

useSuspenseQuery has no enabled option because it would take away the benefit that data returned from it is guaranteed to be defined. It's also mostly not necessary, because suspended queries run in serial anyways. If the abc query is dependent on data from xyz, you should make that dependency explicit. Also, dispatching data to another state manager is an anti pattern with RQ that is unnecessary. You'd want something like:

const { data: xyz } = useSuspenseQuery({  queryKey: 'xyz' })

useSuspenseQuery({ queryKey: ['abc', xyz] }, queryFn: ()  => fetchAbc(xyz}))