Parallel

몇 가지 상황을 제외하고 쿼리 여러 개가 선언된 일반적인 상황인 경우, 쿼리 함수들은 병렬로 요청되어 처리됩니다.
이런 특징은 쿼리 처리의 동시성을 극대화 시킵니다.

다중의 쿼리를 동시에 수행하는 경우, 렌더링이 거듭되는 사이에 계속 쿼리의 호출되어야 된다면
쿼리를 수행하는 로직이 hook 규칙에 어긋날 수도 있습니다.
useQueries를 사용하여 해당 문제를 해결할 수 있습니다.

useQueries

useQueries

const getPosts = async (id: number) => {
  return await axios.get(`https://jsonplaceholder.typicode.com/post/{id}`);
};

const queryResults = useQueries({
  queries: [
    {
      queryKey: ["posts", 1],
      queryFn: () => getPosts(1),
      staleTime: Infinity,
    },
    {
      queryKey: ["posts", 2],
      queryFn: () => getPosts(2),
      staleTime: 0,
    },
    // ...
  ],
});

Queries Combine

Queries Combine 공식문서

useQueries hook이 반환한 모든 쿼리 결과가 포함된 배열을 단일 값으로 결합하여 사용하기 위해서는 combine 옵션을 사용하여 처리할 수 있습니다.

• combinedQueries는 data, pending 프로퍼티를 갖습니다.
  • 결합하면 쿼리 결과의 나머지 다른 프로퍼티들은 손실됩니다

const getPosts = async (id: number) => {
  return await axios.get(`https://jsonplaceholder.typicode.com/post/{id}`);
};

const ids = [1,2,3]
const combinedQueries = useQueries({
  queries: ids.map(id => (
    { queryKey: ['post', id], queryFn: () => getPosts(id) },
  )),
  combine: (results) => {
    return ({
      data: results.map(result => result.data),
      pending: results.some(result => result.isPending),
    })
  }
})