rtk query 서버 response body payload 값 바로 안 가져와지는 이슈

이슈사항

 

 postTokenQuery(token)
        .then((res) => {
          console.log(res, '쿼리 res');
          if (res.data) {
            setTokenInStorage(token);
          }
        })
        .catch(() => toast.error('토큰 에러 발생')); //서버 응답 실패시 실행 안됨

 

rtk query 라이브러리를 활용해서 서버와 통신하는데 서버에서 보내주는 응답에 따라 

 성공하면?  .then 으로 특정 로직을 실행하고

 실패하면? .catch 로 토스트를 띄우는 로직이다. 

 

그런데 서버의 응답에 실패해도, catch 문으로 넘어가지 않고, then에서 걸려 res 응답을 콘솔에 띄우는 이상한 점이 발견되었다. 

성공시 {data: {…}} 가 콘솔에 찍히고, 실패시 {error: {...}}가 콘솔에 찍히는 걸 확인하였다.

 

원인 

HTTP requests 를 기본적으로 설정할 수 있도록 하는 fetchBaseQuery메서드로 기본 baseQuery를 설정했는데, fetchBaseQuery의 결과로 Promise 결과 타입은 아래와 같다. 

 

type FetchBaseQueryResult = Promise<
  | {
      data: any
      error?: undefined
      meta?: { request: Request; response: Response }
    }
  | {
      error: {
        status: number
        data: any
      }
      data?: undefined
      meta?: { request: Request; response: Response }
    }
>

 

위와 같은 타입으로 정의되어있기에, api 호출이 성공하면, 서버에서 주는 응답 payload body가 {data: {…}} 형태로 응답을 주는 것이었고

실패하면, {error: {…}} 형태로 응답을 주는 것이었다. 

따라서 쿼리로 받는 response 타입을 성공 SuccessType, 실패 ErrorType의 union type으로 지정하여 .then() 체인 내부에서 성공시? ~~ 실패시? ~~ 데이터를 일일이 타입에 따라 받아와야 하는 번거로움이 있었다. 

 

해결 

rtk query의 unwrap() 이라는 체인을 사용해서 성공 / 실패의 payload를 바로 받아올 수 있다. 

 

 postTokenQuery(token)
        .unwrap()
        .then((res: TokenResponseType) => {
          console.log(res, '쿼리 res');
          setTokenInStorage(token);
        })
        .catch(() => toast.error('토큰 에러 발생'));

 

이렇게 적어주면 서버 응답 성공시 response에 바로 응답 payload 바디가 담기고, 에러는 자연스럽게 catch 문에서 잡힌다. 

 

 

공식문서 참고

https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery

https://redux-toolkit.js.org/rtk-query/usage/error-handling