Dependent Queries

useQuery dependent Query

종속(또는 순차적) 쿼리는 이전 쿼리가 완료되어야만 실행될 수 있는 쿼리를 말한다. 이를 구현하는 것은 간단하다. 

// 사용자 정보 가져오기
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// 사용자의 프로젝트 정보 가져오기
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // userId가 존재할 때까지 쿼리는 실행되지 않는다.
  enabled: !!userId,
})

 
projects 쿼리는 다음 상태로 시작한다.

status: 'pending'
idPending: true
fetchStatus: 'idle'

 
user 데이터가 사용 가능해지는 즉시, projects 쿼리는 enabled 상태가 되며 다음 상태로 전환된다.

status: 'pending'
isPending: true
fetchStatus: 'fetching'

 
프로젝트 데이터를 성공적으로 가져오면, 다음 상태가 된다.

status: 'success'
isPending: false
fetchStatus: 'idle'

 

useQueries dependent Query

Dynamic parallel query - useQueries 역시 이전 쿼리에 종속될 수 있다. 구현 방법은 다음과 같다.

// 사용자 ID 목록 가져오기
const { data: userIds } = useQuery({
  queryKey: ['users'],
  queryFn: getUsersData,
  select: (users) => users.map((user) => user.id),
})

// 그 다음 사용자들의 메시지 가져오기
const usersMessages = useQueries({
  queries: userIds
    ? userIds.map((id) => {
      return {
        queryKey: ['messages', id],
        queryFn: () => getMessagesByUsers(id),
      };
    })
  : [], // userIds가 undefined이면 빈 배열을 반환
});

 

useQueries는 쿼리 결과의 배열을 반환한다.

 
A note about performance

종속 쿼리는 request waterfall 형태를 띠게 되며 이는 성능을 저해한다. 만약 두 쿼리가 동일한 시간이 걸린다고 가정할 때, 병렬이 아닌 직렬(순차적)로 처리하면 항상 2배의 시간이 걸린다. 이는 특히 클라이언트의 지연 시간이 높은 환경에서 성능에 악영향을 준다. 
 
가능하다면, 두 쿼리를 병렬로 가져올 수 있도록 백엔드 API를 재구성하는 것이 항상 더 좋지만, 현실적으로 불가능할 수도 있다.
 
위의 예시에서 getProjectsByUser를 호출하기 위해 getUserByEmail을 먼저 가져오는 대신, getProjectsByUserEmail 같은 새로운 쿼리를 도입한다면 이러한 폭포 현상을 해소할 수 있다.
 
https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries

Dependent Queries | TanStack Query React Docs