[React] React-query 병렬 쿼리

병렬 쿼리

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

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

 function App () {
   // 병렬 실행
   const usersQuery = useQuery('users', fetchUsers)
   const teamsQuery = useQuery('teams', fetchTeams)
   const projectsQuery = useQuery('projects', fetchProjects)
   ...
 }

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

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

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

react hook에는 다음과 같은 규칙이 있습니다.

후크는 JavaScript 함수이지만 두 가지 추가 규칙을 부과합니다.

• 최상위 수준에서 Hooks만 호출 합니다 . 루프, 조건 또는 중첩 함수 내에서 Hooks를 호출하지 마십시오.
• React 함수 구성 요소 에서만 Hooks를 호출 합니다 . 일반 JavaScript 함수에서 Hooks를 호출하지 마십시오. (Hooks를 호출할 수 있는 다른 유효한 장소가 하나 있습니다. 사용자 정의 Hooks입니다. 잠시 후에 이에 대해 알아보겠습니다.)

때문에 루프, 조건 또는 중첩 함수내에서는 정적(수동)으로 병렬 쿼리를 선언할 수 없습니다.

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

 

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

종속 쿼리

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

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

 

 const { data: user } = useQuery(['user', email], getUserByEmail)
 
 const userId = user?.id
 
 const { isIdle, data: projects } = useQuery(
   ['projects', userId],
   getProjectsByUser,
   {
     // userId 가 존재할때 까지 쿼리를 실행하지 않습니다.
     enabled: !!userId,
   }
 )