<aside> 💡 Dependant Query를 알아보자. 🔥🔥🔥

</aside>

개요

두 쿼리가 의존관계가 존재하여 특정 순새대로 실행이 되어야 하는경우 아래 예시처럼 첫 번째 쿼리에선 유저의 정보 , 두번째 쿼리에선 유저의 정보에서 아이디를 이용해 유저의 프로젝트를 받아오는 쿼리가 존재한다면

어떻게 해야할까?

const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
});

const userId = user?.id

const {
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
});

useQuery() 의 enabled 옵션을 사용하여 enabled 의 값이 true 가 되면 쿼리가 실행된다.

특정한 값이나 조건이 충족된 이후에 실행되는 쿼리를 Dependant Query 라고 부른다.

위 예제처럼 useId 를 먼저 받아와야 실행될 수 있는 쿼리를 사용하려면 다음과 같이 설정하면된다.

/// ...

const {
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  enabled: !!userId, // useId 값이 들어와야만 실행을 한다.
});