공식문서 : https://tanstack.com/query/v4/docs/guides/parallel-queries

Parallel Queries

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

Manual Parallel Queries

parallel 쿼리의 수가 변경되지 않는다면 parallel 쿼리를 사용하기 위한 추가 노력이 필요하지 않다. React Query의 useQuery와 useInfiniteQuery hook들을 원하는만큼 나란히 사용해라!

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

suspense 모드에서 React Query를 사용할 때 첫번째 쿼리가 내부적으로 promise를 throw하고 다른 쿼리들이 실행되기 전에 component를 일시중지하기 때문에 이 병렬 패턴은 작동하지 않는다. 이 문제를 해결하려면 useQueries hook(권장됨)을 사용하거나 각 useQuery 인스턴스에 대해 별도의 컴포넌트을 사용하여 자신의 병렬화를 조정해야 한다(어설픔).

Dynamic Parallel Queries with useQueries

실행해야할 쿼리 수가 렌더링마다 변경되는 경우, hook 규칙을 위반하므로 manual querying을 사용할 수 없다. 대신 React Query는 useQueries hook을 제공하며, 이 hook를 사용하여 동적으로 원하는 만큼의 쿼리를 병렬로 실행할 수 있다.

useQueries는 쿼리 객체 배열을 쿼리 key로 가지는 옵션 객체를 허용한다. 이는 쿼리 결과 배열을 반환한다. :

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