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:
// Get the userconst { data: user } = useQuery(['user', email], getUserByEmail)
const userId = user?.id
// Then get the user's projectsconst { isIdle, data: projects } = useQuery( ['projects', userId], getProjectsByUser, { // The query will not execute until the userId exists enabled: !!userId, })
// isIdle will be `true` until `enabled` is true and the query begins to fetch.// It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)
Fast track your learning and
take the offical React Query course ↗️
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.