React Query 에서 종속 쿼리는 이전 쿼리가 완료되어야 실행할 수 있는 쿼리를 말하는데, useQuery 와 useQueries 두 가지 훅에서 어떤 방식으로 사용되는 정리 해보려 한다.
1. useQuery 를 이용한 종속 쿼리
useQuery 에서는 이전 포스팅의 enabled 옵션을 사용하여 쿼리의 실행 준비 상태를 알려주면 쉽게 구현이 가능하다.
// 사용자 ID 정보 가져오기
const { data: userId } = useQuery({
queryKey: ["userId", email],
queryFn: () => getUserByEmail(email),
select: (user) => user.id
});
// 사용자 도서관정보 가져오기
const { data: libraries } = useQuery({
queryKey: ["libraries", userId],
queryFn: () => getLibrariesByUser(userId),
enabled: !!userId
});
위 코드를 보면 userAdmCd 쿼리가 사전에 실행되고, 값을 가져와야 libraries 쿼리가 실행된다.
이처럼 libraries 쿼리는 userAdmCd 쿼리에 종속 쿼리가 되는 것이다.
2. useQueries 를 이용한 종속 쿼리
useQueries 에서는 동적 병렬 쿼리를 이전 쿼리에 종속시키는 방법으로 구현이 가능하다.
// 사용자 ID 목록정보 가져오기
const { data: userIds } = useQuery({
queryKey: ["userIds"],
queryFn: () => getUsers(),
select: (users) => users.map((user) => user.id)
});
// 각 사용자 도서관정보 가져오기
const usersLibraries = useQueries({
queries: userIds
? userIds.map((id) => {
return {
queryKey: ["libraries", id],
queryFn: () => getLibrariesByUsers(id)
}
})
: []
})
3. 주의 사항
종속 쿼리는 본질적으로 요청 폭포를 만들어 성능을 저하시킨다. 순차적으로 실행되기 때문에 당연한 말이다.
지연 시간이 긴 클라이언트라면 백엔드 API 를 재구성을 통해 성능적인 면에서 검토가 필요하다는 것이다.
// 사용자 도서관정보 가져오기
const { data: libraries } = useQuery({
queryKey: ["libraries", email],
queryFn: () => getLibrariesByEmail(email),
});
위 코드는 'useQuery 를 이용한 종속 쿼리' 예제 코드에서 요청 폭포가 발생하는 것을 백엔드 API 통합을 통해 email 로 바로 사용자 도서관정보를 가져온다. 새로운 쿼리를 통해 폭포 현상을 줄일 수 있는 것이다.