230118 항해99 73일차 RTK Query Axios interceptor처럼 쓰기

RTK Query를 적용하며 편리했던 속성 및 사용법

1. prepareHeaders
   axios 대신 쿼리의 내장 기능인 fetchBaseQuery를 사용하면서, axios interceptor로 넣어주던 토큰을 어떻게 처리해야할지 고민이였다. 처음엔 다른 코드를 따라하며 쿼리 밖에서 스토리지에서 불러온 토큰을 저장하고, 그 토큰을 사용했는데 그렇게하니 토큰을 위조해도 계속 이전에 저장되어 있던 토큰 값으로 api를 호출하고 있었다. 아래와 같이 prepareHeaders에서 토큰을 불러오도록 설정하면 매번 호출할때마다 스토리지에서 토큰값을 불러오고, 그렇기 때문에 토큰 위조시에도 바로 알아차릴 수 있다.

prepareHeaders: (headers) => {
	const token = sessionStorage.getItem('accessToken');

	if (token) {
		headers.set('authorization', 'Bearer ' + token);
	}

		return headers;
},

2. transformResponse
   응답의 형태를 원하는대로 바꿀 수 있다.

transformResponse: (response: { data: MyKeywordsResponse }) => response.data,

3. middleware
   어떻게 하면 axios interceptor로 공통적으로 관리하던 부분을 쿼리에서도 적용할 수 있을까에 대한 레퍼런스가 정말 거의 없었다,, 다행히 미들웨어로 에러 핸들링 하는 방법은 찾을 수 있었지만, 토큰이 없을 시 요청을 보내지 않는 방법은 찾지 못하고 있었다. 그러다가 rtk query는 thunk 위에서 작동한다던 문구가 떠올랐고, isRejectWithValue로 에러 처리가 가능하다면 isPending으로 요청 처리도 가능하지 않을까 하는 생각이 들었다. 아래와 같이 처리했더니 토큰이 없을 시 요청이 보내지지 않았다!

const rtkQueryPromiseInterceptor: Middleware = () => (next) => (action) => {
  const token = sessionStorage.getItem('accessToken');
  if (isPending(action)) {
    if (!token) {
      abort();
    }
  }

  if (isRejectedWithValue(action)) {
    if ((token && action.payload.status === 401) || action.payload.status === 500) {
      sessionStorage.clear();
      window.location.assign('/');
    }
  }

  return next(action);
};