Dependent Queries

Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

1 // Get the user
2 const { data: user } = useQuery(['user', email], getUserByEmail)
3 
4 const userId = user?.id
5 
6 // Then get the user's projects
7 const { status, fetchStatus, data: projects } = useQuery(
8   ['projects', userId],
9   getProjectsByUser,
10   {
11     // The query will not execute until the userId exists
12     enabled: !!userId,
13   }
14 )

The projects query will start in:

1 status: 'loading'
2 fetchStatus: 'idle'

As soon as the user is available, the projects query will be enabled and will then transition to:

1 status: 'loading'
2 fetchStatus: 'fetching'

Once we have the projects, it will go to:

1 status: 'success'
2 fetchStatus: 'idle'