React Query Promise.all, useQueries

useQueries는 React Query 라이브러리에서 여러 개의 쿼리를 동시에 병렬로 실행할 수 있게 해주는 훅입니다. useQuery는 단일 쿼리를 위한 것이고, useQueries는 여러 개의 useQuery를 한 번에 처리하는 데 사용됩니다.

 

Promise.all 과 같은 역활을 하는 useQueries 

 

사용 예시

const results = useQueries({
  queries: userIds.map(id => ({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
  }))
})

results.forEach(result => {
  if (result.isLoading) {
    console.log('Loading...')
  } else {
    console.log(result.data)
  }
})

 

- userIds 가 [1, 2, 3]이면 fetchUser(1), fetchUser(2), fetchUser(3) 병렬로 호출합니다. 

- results에 결과값이 차례로 들어옵니다. 

 

사용하는 경우 

- 여러개의 독립적인 API를 동시에 불러와야할 때 

- 반복적인 데이터(유저리스트, 상품리스트)를 ID별로 병렬 호출할 때 

 

Promise.all 과 useQueries의 차이

Promise.all은 순서를 보장하지 않지만, useQueries는 순서를 보장한다는 것 입니다. 

const results = useQueries({
  queries: [
    {
      queryKey: ['user', 1],
      queryFn: () => fetchUser(1),
    },
    {
      queryKey: ['user', 2],
      queryFn: () => fetchUser(2),
    },
  ],
})

// results[0]은 fetchUser(1)의 결과
// results[1]은 fetchUser(2)의 결과

 

설령 네트워크 응답 순서가 뒤죽박죽이어도,

useQueries는 내부적으로 순서를 정렬하지 않고 입력한 순서 그대로 결과를 배열에 담아 반환합니다.