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

Dependent Queries

종속(또는 직렬) 쿼리들은 실행하기 전에 완료되어야 하는 이전 쿼리에 의존한다. 이렇게 하려면, enabled 옵션을 사용하여 쿼리가 실행할 준비가 되었을때 알려주는 것 만큼 쉽다. (이렇게만 하면 된다)

// Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)

const userId = user?.id

// Then get the user's projects
const { status, fetchStatus, data: projects } = useQuery(
  ['projects', userId],
  getProjectsByUser,
  {
    // The query will not execute until the userId exists
    enabled: !!userId,
    //Double Exclamation Marks : 변수값이 존재하면 true, 존재하지 않으면 false 반환
  }
)

projects 쿼리는 다음위치에서 시작된다. :

status: 'loading'
fetchStatus: 'idle'

user를 사용할 수 있게 되면, projects 쿼리가 enabled되고 다음으로 전환된다 :

status: 'loading'
fetchStatus: 'fetching'

projects를 마치면 다음과 같은 결과가 나온다 :

status: 'success'
fetchStatus: 'idle'