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 <script>
2   // Get the user
3   const queryUserResult = useQuery(['user', email], getUserByEmail)
4   let userId
5   $: userId = $queryUserResult.data?.id
6   
7   // Then get the user's projects
8   const queryProjectsResult = useQuery(
9     ['projects', userId],
10     getProjectsByUser,
11     {
12       // The query will not execute until the userId exists
13       enabled: !!userId,
14     }
15   )
16   
17   $: {
18       queryProjectsResult.setOptions(
19       ['projects', userId],
20       getProjectsByUser,
21       {
22         enabled: !!userId,
23       })
24     }
25   // $queryProjectsResult.isIdle will be `true` until `enabled` is true and the query begins to fetch.
26   // It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)
27 </script>

The same example using the Querycomponent to avoid calling the setOptions.

1 <script>
2   // Get the user
3   const queryUserResult = useQuery(['user', email], getUserByEmail)
4   let userId
5   $: userId = $queryUserResult.data?.id
6 </script>
7 
8 <Query options={{ queryKey: ['projects', userId], queryFn: getProjectsByUser, enabled: !!userId }}>
9   <div slot="query" let:queryProjectsResult>
10     // queryProjectsResult.isIdle will be `true` until `enabled` is true and the query begins to fetch.
11     // It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)
12   </div>
13 </Query>