Query Docs
Guides & Concepts
- Important Defaults
- Queries
- Query Keys
- Query Functions
- Parallel Queries
- Dependent Queries
- Background Fetching Indicators
- Window Focus Refetching
- Disabling/Pausing Queries
- Query Retries
- Paginated Queries
- Infinite Queries
- Initial Query Data
- Placeholder Query Data
- Prefetching
- Mutations
- Query Invalidation
- Invalidation from Mutations
- Updates from Mutation Responses
- Optimistic Updates
- Query Cancellation
- Scroll Restoration
- Filters
- SSR & Next.js
- Caching
- Default Query Fn
- Suspense
- Testing
- Does this replace [Redux, MobX, etc]?
- Migrating to React Query 3
AI/LLM: This documentation page is available in plain markdown format at/query/v3/docs/framework/react/guides/dependent-queries.md
Guides & Concepts
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:
js
// Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)
const userId = user?.id
// Then get the user's projects
const { 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 :)