[TanStakQuery] 병렬 쿼리(Parallel Queries)

"병렬" 쿼리는 fetching 동시성을 최대화하기 위해 병렬로 또는 동시에 실행되는 쿼리입니다.

수동 병렬 쿼리(Manual Parallel Queries)

병렬 쿼리의 수가 변하지 않는 경우 병렬 쿼리를 사용하기 위해 추가로 노력할 필요가 없습니다. TanStack Query의 useQuery, useInfiniteQuery 훅들을 나란히 몇 개든 사용하기만 하면 됩니다!

function App () {
  // The following queries will execute in parallel
  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
  ...
}

"suspense mode에서 React Query를 사용하면 첫 번째 쿼리가 내부적으로 프로미스를 던지고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하기 때문에 이러한 병렬 처리 패턴이 작동하지 않습니다. 이 문제를 해결하려면 useQueries 훅을 사용하거나(권장됨) 각 사용 쿼리 인스턴스에 대해 별도의 컴포넌트를 사용하여 자체 병렬 처리를 ochestrate해야 합니다(구림)."

useQueries 동적 병렬 쿼리(Dynamic Parallel Queries with uesQueries)

실행해야 하는 쿼리 수가 렌더링마다 변경되는 경우 수동 쿼리를 사용하면 훅 규칙을 위반하게 되므로 사용할 수 없습니다. 대신, TanStack Query는 원하는 만큼의 쿼리를 동적으로 병렬로 실행하는 데 사용할 수 있는 useQueries 훅을 제공합니다.

useQueries는 쿼리 객체의 배열을 값으로 하는 쿼리 키가 있는 옵션 객체를 받습니다. 아래는 쿼리 결과 배열을 리턴합니다:

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

Reference

• Parallel Queries | TanStack Query Docs