[TanStakQuery] 종속 쿼리(Dependent Queries)

종속(또는 직렬) 쿼리는 이전 쿼리가 완료되어야 실행할 수 있습니다. 이를 위해서 enabled 옵션을 사용하여 쿼리를 실행할 준비가 되었음을 쿼리에 알리기만 해도 될 정도로 간단합니다:

// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // The query will not execute until the userId exists
  enabled: !!userId,
})

projects 쿼리는 여기서 시작할 것입니다:

status: 'loading'
fetchStatus: 'idle'

user가 사용 가능한 상태가 되면 projects 쿼리가 enabled 되고 다음으로 전환됩니다:

status: 'loading'
fetchStatus: 'fetching'

한 번 프로젝트를 갖게 되면 다음으로 전환됩니다:

status: 'success'
fetchStatus: 'idle'

Reference

• Dependent Queries | TanStack Query Docs