Parallel Queries

"Parallel"(병렬) 쿼리는 fetching 동시성을 극대화하기 위해 병렬로, 즉 동시에 실행되는 쿼리이다.

 

Manual Parallel Queries: 수동 병렬 쿼리

병렬 쿼리의 수가 변경되지 않는다면, 병렬 쿼리를 사용하는 데 별다른 노력이 필요하지 않다. 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 })
  }

 

React Query를 suspense mode에서 사용하는 경우, 이 병렬 처리 패턴은 작동하지 않는다. 첫 번째 쿼리가 내부적으로 promise를 throw하여 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단시키기 때문이다. 이 문제를 해결하려면 useSuspenseQueries 훅을 사용하거나(권장) 또는 각 useSuspenseQuery 인스턴스에 대해 별도의 컴포넌트를 사용하여 병렬 처리를 직접 구현해야 한다.

 

Dynamic Parallel Queries with useQueries: 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),
      }
    }),
  })
}

 

데이터 로딩 성능을 최적화하고 UX를 향상시키는 데 매우 중요하게 사용된다.

필요한 데이터가 3개로 고정되어 있다면?

useQuery 3개를 나란히 쓴다.

 

필요한 데이터가 N개로 유동적이라면?

useQueries를 사용한다.

 

https://tanstack.com/query/latest/docs/framework/react/guides/parallel-queries

Parallel Queries | TanStack Query React Docs