[React] react-query에서 에러 처리하기

  react-query는 onError 옵션을 통해 에러 처리 메소드를 지정할 수 있도록 해준다. 그런데 매 쿼리마다 onError 메소드를 지정해주는 것은 비효율적이다. 예를 들어서 서버 점검으로 인해 503번 HTTP 상태 코드가 반환되었을 때 우리는 공통적으로 서버 점검 관련 안내 메시지 혹은 화면을 보여줄 것이다. 그런데 매 쿼리가 생성될 때마다 503번 코드를 받았을 때 해당 작업을 수행하는 메소드를 지정해주는 것은 비효율적이다.

  다행히 react-query는 QueryClient를 생성할 때 default option들을 지정하게 해 준다. 그 중 onError 옵션에 에러 처리 함수를 지정해주면 해당 QueryClient 내부에서 사용하는 모든 useQuery와 useMutation hook에 해당 에러 이벤트 리스너를 지정해줄 수 있다. 물론 각 쿼리별로 독자적인 에러 처리 함수가 필요한 경우도 존재한다. 이 경우에는 각각의 useQuery 혹은 useMutation 훅에서 onError 함수를 지정해주면 된다.

  하지만 각 query와 mutation에서 onError을 지정해주면 QueryClient에 적용된 default option에 추가로 지정되는 것이 아니라 해당 옵션을 덮어쓴다는 점에 주목해야 한다. 대부분의 경우에서 우리가 원하는 것은 특정 query 혹은 mutation에서 특정 에러에 대해서만 별도의 처리 함수를 지정해주고 그 외에는 디폴트 처리 함수를 그대로 적용하는 것일 것이다. 이럴 때는 다음과 같이 에러 핸들링 훅을 작성해주면 된다. useApiError 훅은 HTTP 상태 코드와 그에 대응하는 처리 함수를 key와 value로 가지는 object를 인자로 전달받는다. 해당 object는 해당 query 혹은 mutation에 특별하게 지정할 에러 처리 함수들을 담고 있으며 그에 해당되지 않는 오류가 발생하는 경우 default handler에 명세된 에러 처리법을 활용한다. 만약 에러 로깅과 같이 모든 에러에 대해 공통적으로 적용하고 싶은 작업이 있다면 아래와 같이 common 프로퍼티를 추가해주거나 혹은 직접 onError 함수의 마지막에 공통 처리 함수를 적용하면 된다. 만약 여러 오류 status code에 동일한 처리 함수를 적용하고 싶다면 defaultHandler를 통해 미지정 에러 코드는 모두 동일하게 처리할 수도 있다. 또한 error response에 오류와 관련된 구체적인 정보를 추가한다면 (ex. 개발팀에서 임의로 정의한 오류 코드) error.response 객체에서 해당 정보를 추출하여 보다 구체적인 오류 처리가 가능하다.

 

 

 

 

본 게시물은 다음 링크의 글을 참고하여 작성하였습니다.