[TIL] interceptors.response 전역 error toast 처리

현재 진행하는 프로젝트에서 어드민 페이지의 전역 에러 처리 담당을 하게 되었다 

각 api response 값이 다양하게 들어오기대문에 해당 res data의 vlaue 값을 별도로 뽑아주는 작업을 진행하여야 했다.

react-toastify 라이브러리를 통해  toast 팝업을 띄워 주었으며 코드는 다음과 같다. 

 

import { toast } from "react-toastify";

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    const { response } = error;
    if (response)
      toast.error(`${Object.values(response.data)[0]}`, {
       	// toast 스타일 
        position: "top-center",
        autoClose: 1000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "colored",
      });
    return Promise.reject(error);
  }
);

// err toast
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <ToastContainer />
        <GlobalModal />
        <Loading />
        <Routes>
          <Route path="/" element={<DefaultLoginLayout />}>
           ...
          </Route>
         </Routes>
     </QueryClientProvider>

response로 들어오는 data 값들만 뽑아야 했기 때문에 조건문을 활용해서  res data가 있을 경우에만 toast를 띄워줄 수 있으며 

Object.values를 사용하여 텍스트 내용을 확인했다.