enabling/disabling suspense queries?

[tbowmo]

We are looking at using useSuspenseQuery in our react project, but have a few questions on how to proceed. As a background info we are also moving from old redux based approach to tanstack/query in general

Normally when you chain useQuery, you use the enabled property of useQueryOptions to disable successive requests, until the first is finished (ref docs - dependent Query)

How would we proceed to do this with useSuspenseQuery? There is no enabled prop there, so we cannot pause the query, until the predecessor is done fetching.

I know that the docs talks about performance hits, when doing multiple backend requests to build data for the UI layer. But our data comes from many different sources (each with their own distinct database) so it's not possible to query across those in the backend

[TkDodo]

How would we proceed to do this with useSuspenseQuery? There is no enabled prop there, so we cannot pause the query, until the predecessor is done fetching.

Please, if you want to use suspense, you need to understand how suspense works :) This is independent of react-query. With suspense, data is guaranteed to be defined after the suspense call because react suspends if it has no data. We even mention that in the docs:

On the flip side, you therefore can't conditionally enable / disable the Query. This generally shouldn't be necessary for dependent Queries because with suspense, all your Queries inside one component are fetched in serial.

The example from the dependent query docs site literally just becomes:

const { data: user } = useSuspenseQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

// no need for optional chaining
// this code will only run after the first query has succeeded
const userId = user.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
})

This is actually what worries me with suspense on the client - two call in the same component to useSuspenseQuery will create a waterfall, which "help" with dependent queries, but can be a footgun if you wanted to fetch in parallel.

I also have a blog post on this topic: https://tkdodo.eu/blog/seeding-the-query-cache

[prashantbhudwal]

For anyone concerned: For cases where you want to run the Q2 only if you get a specific result from Q1, you could use composition and move Q2 down the component tree and use an early return.

C1 {
const isTrue = Q1
const data = Q2 // run only if isTrue

return <>{data}</>
}

-->

C1 {
const isTrue = Q1
if(!isTrue) {
return <>whatever<>
}
return <C2/>
}

C2 {
const data = Q2 
return <>{data}</>
}