React Query onError 가 동작하지 않는 이슈

https://stackoverflow.com/questions/73427408/react-query-onerror-not-executing-on-thrown-error

React-query onError not executing on thrown Error

현재 위와 비슷한 상황에 고통받고 있습니다...

 

API 요청시 Axios Intercepter 를 사용하는 Axios Instance 로 요청하게 되고,

그리고 이 요청을 try catch 문 으로 감싸고 있으며, catch 문에서 return 을 해주는 구조로 사용 중입니다.

 

문제는 Error 가 발생했을때 엉뚱하게도 useQuery 의 onError 가 아니라 onSuccess 가 수행됩니다.

아래와 같이 onSucess의 res 에 API 응답 데이터가 아니라 AxiosError 타입의 데이터가 들어갑니다.. ㅠㅠ

onSuccess(res) {

 

}

 

물론 res 가 AxiosError 타입인지만 확인해서 처리하면 상관은 없겠다만...

그렇게 하고 싶지는 않네요.

 

여러가지로 시도를 해봤는데

try catch 문을 제거하면 아예 에러 감지가 안되는 듯 하고

Axios Intercepter 를 걷어내어도 똑같습니다.

아예 useQuery 의 queryFn 안에다가 axios Instance 가 아니라  쌩 axios 를 바로 호출했는데도 안되네요.

🤨🤨🤨🤨🤨🤨🤨🤨🤨🤨🤨

 

https://codevoweb.com/react-query-context-api-axios-interceptors-jwt-auth/

React Query, and Axios Interceptors JWT Authentication - CodevoWeb

인터넷에서 찾은 이 예제에서 Axios Intercepter 를 사용하고 onError 로 처리하는 코드가 있는걸 보면

안되는건 아닌것 같은데 ...

 

 

2022.12.21 (수)

 

드디어 해결했습니다~

ㅋㅋㅋ

 

공용 API 호출 함수의 반환 방식이 잘못된 것이었습니다.

해결 방법은 then~ catch 문을 제거하고 그냥 return 하게 만들어야 했습니다.

 

catch 를 하면 error 가 unknown 타입으로 나오는데

함수 반환값을 Promise<T> 이런식으로 제네릭으로 해둔 것이랑 충돌이 났던것으로 보입니다.

아무래도 error 를 unknown 인 그 상태 그대로 return 하지 않고서는 error 라고 인식하지 못하는가 봅니다..

export const tempRequestWithAuthCheck = async <T>({
  ...
}: 타입): Promise<T> => {

  // 기존에 사용하던 방식.
  return axoisInstance.request<T>({
   ...
  }).then(res=>{ ... return res }).catch(error=> { ... return error })


  // try catch 로 바꾸면 error 가 unknown 이라 return 안됨. 함수 반환값을 unknown으로 바꿔야 함.
  try{
    const res = await axoisInstance.request<T>({)
  }catch(error){
    return error -> 이게 안되게 됨
  }


  // 제대로 동작한 방식
  const res = await axoisInstance.request<T>({
   ...
  })
  return res.data
}