[ReactQuery] QueryClient의 defaultOptions를 사용한 전역 에러 핸들링

❗ 서론

ReactQuery를 사용하다가 useQuery의 onError를 사용하여 에러 핸들링을 한 경험들이 있을것이다.

그리고 글을 읽는 독자가 전역 에러 핸들링에 대해서 명확히 알지 못하여 컴포넌트 하나하나에 onError를 명시하는 반복적이고 비효율적인 작업을 한 번 쯔음은 해봤을거라 생각한다.

해당 포스팅은 그런 작업에서 여전히 헤매고있을 독자들에게 전하는 포스팅이다. 이름하여 "전역 에러 핸들링" ...

그리고 해당 포스팅은 예제와 공식 문서를 툭 던져줄 것이다 파이팅

 

그럼 시작해보자

 

❗ 예제

일단 전역 에러 핸들링을 하지 않았던 예시를 살펴보자.

 

✔ 전역 에러 핸들링을 하지 않은 예제

export function useTreatments(): Treatment[] {
  const toast = useCustomToast();

  const fallback = [];
  const { data = fallback } = useQuery([queryKeys.treatments], getTreatments, {
    onError: (error) => {
      const title =
        error instanceof Error
          ? error.message
          : "error connecting to the server";
      toast({ title, status: "error" });
    },
  });
  return data;
}

해당 코드를 간단히 설명하고 넘어가자면, useQuery를 사용하여 getTreatments 호출을 통해 데이터를 가져오고

onError를 통하여 에러 핸들링을 하는 커스텀 훅이다. 

 

보시다싶히 onError 옵션을 사용하여 전역이 아닌 방법으로 에러 핸들링을 하는 모습이다.

해당 커스텀훅 하나만 보면 크게 문제점을 못느끼겠지만 이러한 형태들이 수십개가 된다면

하나하나 파일을 들어가서 에러 핸들링을 해줘야하는 참사가 벌어진다.

 

그래서 해당 포스팅이 그런 문제점을 해결해주고자 한다.

 

✔ 전역 에러 핸들링을 적용한 예제

export function useTreatments(): Treatment[] {
  const fallback = [];
  const { data = fallback } = useQuery([queryKeys.treatments], getTreatments);
  return data;
}

일단 딱 보기에도 코드가 줄었다.

 

에러 핸들링에 대한 부분은

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: queryErrorHandler,
    },
  },
});

이처럼 전역 에러 핸들링을 위한 별개의 파일을 생성하여 관리한다.

QueryClient의 두 번째 인자에서 defalutOptions중에 queries를 사용하여 useQuery시에 발생하는 에러를 공통적으로 사용할 수 있게 해주는 옵션을 사용한 것이다.

 

물론 mutation도 가능하다 mutation은

export const queryClient = new QueryClient({
  defaultOptions: {
    mutations: {
      onError: queryErrorHandler,
    },
  },
});

이렇게 사용하면 되고 mutations와 queries도 함께 사용할 수 있다 . 

 

해당 코드에서 queryErrorHandler에 대해 혹시 궁금해 하실까봐 별도의 코드를 남기겠다.

import { createStandaloneToast } from "@chakra-ui/react";
import { theme } from "../theme";

const toast = createStandaloneToast({ theme });

function queryErrorHandler(error: unknown): void {
  const title =
    error instanceof Error ? error.message : "error connecting to server";

  toast.closeAll();
  toast({ title, status: "error", variant: "subtle", isClosable: true });
}

 

자세한 부분에 대해서 더 궁금하다면

https://tanstack.com/query/v4/docs/react/guides/default-query-function

https://tanstack.com/query/latest/docs/react/reference/QueryClient?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Freference%2FQueryClient#queryclientsetquerydefaults 

QueryClient | TanStack Query Docs

Default Query Function | TanStack Query Docs

해당 링크를 살펴보자.