🔥 병렬 쿼리

242자
3분

강의 목차

병렬 쿼리란 동시에 실행되는 쿼리를 말합니다. 이를 통해 데이터 가져오기의 동시성을 최대화할 수 있습니다.

수동 병렬 쿼리

병렬 쿼리의 수가 변하지 않는 경우, 병렬 쿼리를 사용하는 데 추가적인 노력이 필요하지 않습니다. TanStack Query의 useQuery와 useInfiniteQuery 훅을 원하는 만큼 나란히 사용하면 됩니다!

function App () {
  // 아래의 쿼리들은 병렬로 실행됩니다
  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
  ...
}
 
typescript

React Query를 서스펜스 모드에서 사용할 때는 이 병렬 패턴이 작동하지 않습니다. 첫 번째 쿼리가 내부적으로 프로미스를 던져 다른 쿼리들이 실행되기 전에 컴포넌트를 중단시키기 때문입니다. 이를 해결하려면 useSuspenseQueries 훅을 사용하거나(권장), 각 useSuspenseQuery 인스턴스에 대해 별도의 컴포넌트를 만들어 병렬 실행을 직접 조율해야 합니다.

useQueries를 사용한 동적 병렬 쿼리

실행해야 할 쿼리의 수가 렌더링마다 변경된다면, 훅의 규칙을 위반하기 때문에 수동 쿼리를 사용할 수 없습니다. 이런 경우를 위해 TanStack Query는 useQueries 훅을 제공합니다. 이 훅을 사용하면 원하는 만큼 많은 쿼리를 병렬로 동적으로 실행할 수 있습니다.

useQueries는 queries 키를 가진 옵션 객체를 받습니다. 이 키의 값은 쿼리 객체의 배열입니다. 그리고 이 훅은 쿼리 결과의 배열을 반환합니다:

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  })
}
 
typescript

이렇게 useQueries를 사용하면, 동적으로 변하는 수의 쿼리를 효율적으로 병렬 실행할 수 있습니다. 각 사용자에 대해 개별적인 쿼리를 생성하고, 이들을 동시에 실행함으로써 데이터 로딩 시간을 크게 단축할 수 있습니다.