[JavaScript] 여러 request 처리하기 with RTK Query

 

 

한 컴포넌트에 여러 개의 요청을 하는 상황이 있었다. RTK Query를 사용하여 아래와 같이 여러개의 쿼리를 각각의 data와 loading으로 관리하게 되었다. 하지만 코드가 보기에 복잡해보였고 굳이 각각의 쿼리로 관리할 필요 없이 하나의 쿼리로 관리를 하고 싶었다.

 const { data: firstData, isLoading: isFirstLoading } = useFirstQuery();
 const { data: secondData, isLoading: isSecondLoading } = useSecondQuery();
 const { data: thirdData, isLoading: isThirdLoading } = useThirdQuery();

 

RTK Query의 문서를 살펴보니 쿼리를 커스텀마이징을 할 수 있도록 queryFn을 제공하고 있었다.

Customizing Queries | Redux Toolkit

 

queryFn을 사용하여 여러개의 요청을 처리할 수 있었다. 각각의 요청들은 서로 의존하지 않기 때문에 Promise.allSettled으로 병렬적으로 실행이 되게 하였다. 얻은 데이터들을 data에 담아 반환하면 된다.

Promise.all를 쓰려다 allSettled에 대해 새롭게 알게되어 사용하였다. all은 여러 프로미스 중 하나라도 실패하면 전체가 거부되지만 allSettled는 하나가 실패해도 성공한 다른 요청의 결과는 얻을 수 있다는 차이가 있었다. 참고로 allSettled는 ES2020에서 도입이 된 최신 스펙이다.

endpoints: (builder) => ({
    getData: builder.query({
      async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
        const allPromise = Promise.allSettled([
          fetchWithBQ(API_URL),
          fetchWithBQ(API_URL),
          fetchWithBQ(API_URL),
          fetchWithBQ(API_URL),
        ]);
        const [firstData, secondData, thirdData] = await allPromise;

        return {
          data: {
            firstData: firstData.data,
            secondData: firstData.data,
            thirdData: firstData.data,
          },
       };
    },
 }),

 

 

const { data: { firstData, secondData, thirdData } = {}, isLoading } = useGetData();