[React Query] 종속 쿼리 (Dependent Queries)

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 로 바로 사용자 도서관정보를 가져온다. 새로운 쿼리를 통해 폭포 현상을 줄일 수 있는 것이다.