3. Queries - 병렬 & 종속 쿼리

병렬 쿼리

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

정적으로 병렬 쿼리 선언하기

useQuery , useInfiniteQuery 를 나란히 선언하면 자동으로 병렬 쿼리가 실행됩니다.

 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 모드에서 리액트 쿼리를 사용할 때 첫번째 쿼리가 프로미스를 던지고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하기 때문에 병렬 쿼리가 실행되지 않습니다.

이 때, useQueries 를 사용하거나 useQuery 인스턴스에 대한 별도 구성을 해야합니다.

동적으로 병렬 쿼리 선언하기

react-hooks 의 규칙 에 의하면 반복문, 조건문 또는 중첩 함수 내에서 hook 를 선언할 수 없다.

때문에 이 경우엔 정적(수동)으로 병렬 쿼리를 선언할 수 없다.

이 때 useQueries 라는 hook 을 제공해서 동적으로 병렬 쿼리를 구성하여 실행할 수 있다.

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

종속 쿼

종속 (dependent) 쿼리는 이전 쿼리의 실행이 마무리 되어야 실행 될 수 있습니다.

이 같은 처리를 하기 위해선 아래와 같이 enabled 옵션으로 쿼리가 실행될 준비가 되었을 때를 알리면 됩니다.

 // Get the user
 const { data: user } = useQuery(['user', email], getUserByEmail)
 
 const userId = user?.id
 
 // Then get the user's projects
 const { isIdle, data: projects } = useQuery(
   ['projects', userId],
   getProjectsByUser,
   {
     // The query will not execute until the userId exists
     enabled: !!userId,
   }
 )