[ 🔧 ErrorHandling ] axios 에러 발생 시, isError 가 true 가 되지 않음

[nuuco]

- 어떤 부분에서 문제가 발생했나요?

axios 에러 발생 시 React Query의 isError 프로퍼티가 true 가 되어야 하는데, 계속 false 가 나온다.

- 에러 메세지

if(isError) {
   console.log("에러 발생"); //통신 에러가 발생해도 "에러 발생"이 안 찍힘
}

- 에러핸들링 방법

• onError 와 isError 를 같이 써서 발생한 에러였습니다.
• onError에서 에러 처리 로직을 처리하면 에러가 종료됩니다. 즉 isError 가 false가 됩니다.
• onError 로 에러 처리를 할 경우, isError를 사용하지 말고 onError 안에서 state 를 설정해 사용할 수 있습니다.

  const { data, isLoading } = useQuery(
    ['roobits', roomId],
    () =>
      axios
        .get(`${process.env.REACT_APP_API_URL}/rooms/${roomId}`)
        .then((res) => res.data),
    {
      onError: (err) => {
        console.log('요청 err', err);
        setErrPageOpen(true);
      }, //state 처리
    }
  );

- 문제 해결에 도움을 받은 레퍼런스 링크

• 프론트 멘토님의 빛나는 혜안✨
• http://blog.hwahae.co.kr/all/tech/tech-tech/7867/