[TypeScript] AxiosError의 response를 커스텀해보자!

 

react-query의 onError를 사용하거나, Axios로 API를 호출할 때 에러 콜백의 타입은 AxiosError로 선언하게 되는데

서버에서 에러코드에 따라 title, msg 등 response를 내려주는 경우에

 

onError : (error : AxiosError) => {
	onAddModal(error.reponse.data.msg) // <-- type warning
}

 

위와 같이 response를 가져오려고 하면 타입 에러가 생긴다

(컴파일단에서는 당연히 문제가 없지만, 우리는 빨간줄을 혐오하니까)

 

이럴 때는 간단하게, AxiosError를 상속받는 타입을 선언해주면 된다.

 

interface IErrorDataProps extends AxiosError {
  data: {
    message?: string;
    status_code?: number;
    title?: string;
  };
}

export interface ICustomAxiosErrorProps {
  response: IErrorDataProps;
}

 

보통 각 회사, 서비스마다 형식도 제각각일텐데 이런식으로 서비스에 맞게 에러 타입을 global로 맞추고

 

onError: (e: ICustomAxiosErrorProps) => {
      if (e.response.status) {
        onAddModal({
          props: {
            message: e.response.data?.message,
          },
        });
      }
    },

 

onError 부분에 넣어준다면 공포의 빨간 줄은 사라질 것이다.