병렬 쿼리

"병렬" 쿼리는 가져오기 동시성을 극대화하기 위해 병렬로, 즉 동시에 실행되는 쿼리입니다.

수동 병렬 쿼리

병렬 쿼리 수가 변경되지 않는 경우, 병렬 쿼리를 사용하는 데 추가 작업이 필요하지 않습니다. 원하는 수의 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 모드에서 React Query를 사용할 때는 첫 번째 쿼리가 내부적으로 Promise를 발생시키고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하므로, 이 병렬 처리 패턴이 작동하지 않습니다. 이를 해결하려면 useSuspenseQueries 훅을 사용하거나(권장), 각 useSuspenseQuery 인스턴스에 별도의 컴포넌트를 사용하여 직접 병렬 처리를 조율해야 합니다.

useQueries를 사용하는 동적 병렬 쿼리

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

useQueries는 값이 쿼리 객체의 배열인 queries 키를 포함하는 options 객체를 허용합니다. 이 함수는 쿼리 결과의 배열을 반환합니다:

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

TypeScript를 사용할 때 useQueries에 전달된 쿼리 객체에 인라인으로 작성된 select는 동일한 객체의 queryFn에서 data 인수를 추론할 수 없어 unknown으로 대체됩니다. 타입 추론을 유지하려면 select 매개변수에 명시적으로 타입을 지정하거나 queryOptions 헬퍼로 쿼리를 정의하세요. 이 알려진 제한 사항을 참조하세요.