이전 코드

const silentRefresh = async (originRequest: InternalAxiosRequestConfig) => {
  try {
    const newToken = await updateToken();
    storage.set(newToken);
    setAxiosAuthHeader(originRequest, newToken);
    return await publicApi(originRequest);
  } catch {
    removeToken();

    if (isClient()) {
      history.pushState('', '', '/');
    }
  }
};

문제 상황

• / 주소로 이동은 되지만 아래 메세지와 함께 에러페이지가 렌더링

원인

• silentRefresh 함수에서 에러를 캐치하고 있는데 다시 throw해주지 않아서 useQuery에서 에러임을 알지 못함. 그래서 data를 읽으려고 함.
• silentRefresh에서 토큰을 지우는 작업을 수행하고, 에러를 다시 throw해줘야함.

해결

• token remove 후 강제로 페이지 reload

const silentRefresh = async (originRequest: InternalAxiosRequestConfig) => {
  try {
    const newToken = await updateToken();
    storage.set(newToken);
    setAxiosAuthHeader(originRequest, newToken);
    return await publicApi(originRequest);
  } catch (error) {
    removeToken();

    if (isClient()) {
      window.location.reload();
    }

    return Promise.reject(error);
  }
};