TanStackQuery (7) - 병렬 / 종속 쿼리

 

병렬 쿼리

병렬로 또는 동시에 실행되어 패칭 동시성을 극대화하는 쿼리이다.

 

수동 병렬 쿼리

병렬 쿼리의 수가 변하지 않을 때, 병렬 쿼리를 사용하기 위한 추가적인 코드 작성은 없다.

그저 TanStack Query의 useQuery와 useInfiniteQuery hook을 나란히 사용하면 된다.

function App () {
	const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
    const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
	// ...

 

주의사항 

Suspense 모드에서 React Query를 사용할 때 이 병렬 패턴은 작동하지 않는다

첫번째 쿼리가 내부적으로 Promise를 throw하고 다른 쿼리가 실행되기 전에 구성 요소를 일시 중단하기 때문이다.

이를 해결하려면 useSuspenseQueries hook을 사용하거나 각 useSuspenseQuery 인스턴스(객체)에 대해 별도의 구성 요소로 고유한 병렬 처리를 조정해야 한다.

 

useQueries를 사용한 동적 병렬 쿼리

실행해야 하는 쿼리 수가 랜더링마다 바뀌는 경우 hook 규칙을 위반(항상 순수)하기 때문에 수동 쿼리를 사용할 수 없다.

대신 TanStackQuery는 useQueries hook을 제공하는데, 이를 사용하면 원하는 만큼 많은 쿼리를 병렬로 동적으로 실행할 수 있다.

 

useQueries는 쿼리 키가 있는 옵션 객체를 수락하며, 이 객체의 값은 쿼리 객체 배열이다

즉 쿼리 결과 배열을 반환한다.

 

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

 

종속(dependent) 쿼리

useQuery 종속 쿼리

종속(또는 직렬) 쿼리는 실행하기 전에 이전 쿼리가 완료 되어야 한다

이를 위해서 enabled 옵션 사용하여 쿼리가 실행될 준비가 되었을 때를 알린다.

const { data: user } = useQuery({
	queryKey: ['user', email],
    queryFn: getUserByEmail,
 })
 
 const { status, fetchStatus, data: project } = useQuery({
 	queryKey: ['projects', userId],
    queryFn: getProjectByUser,
    enabled: !!userId, // userId가 존재할 때 까지 실행하지 않는다 !!옵션으로

 

다음의 절차를 거쳐 쿼리가 실행된다

시작

status: 'pending'
isPending: 'true'
fetchStatus: 'idle'

 

user가 사용가능해지면 project query가 활성화되고 아래와 같이 전환된다

status: 'pending'
isPending: true
fetchStatus: 'fetching'

 

project가 finish되면 아래와 같이 전환된다

status: 'success'
isPending: false
fetchStatus: 'idle'

 

성능에 대한 참고 사항

종속쿼리는  병렬 쿼리에 비해 성능이 구리다

항상 두배의 시간이 걸리기 때문.. 가능하다면 병렬로 사용하자

 

하지만 조금만 생각해보자

예를들어 a테이블에서 데이터 요소를 참조하여 b테이블 데이터를 사용하려할 때

a테이블의 데이터가 반드시 필요하기 때문에 어차피 종속 쿼리로 작성해야한다..

 

이때 a테이블의 데이터 요소가 반드시 존재한 후 쿼리를 실행하게 하는 

!! 연산자를 기억하기 바란다.