본문으로 건너뛰기

23.08.09

오늘 한 일​

  • 카공실록 개발 및 회의

🤔에러 처리를 어떻게 하지?​

카공실록 프로젝트에서 에러 처리를 어떻게 할지 고민했다.

유저가 로그인을 하지 않았을 때 유저 정보 조회 api를 호출하면 에러가 발생한다.

일단 호출하는 함수는 다음과 같다.

export const getUserInfo = async (params: UserInfoParams) => {
  const { data } = await api.get<User>('api/v1/members', {
    searchParams: { ...params },
  });

  return data;
};

그리고 커스텀 쿼리 훅은 다음과 같다.

export function useGetUserInfo(params: UserInfoParams) {
  return useSuspenseQuery(Keys.userInfo(params), () => getUserInfo(params));
}

에러 처리 방법​

  1. ErrorBoundary를 사용한다.

근데 지금 상황에서는 사이드 바가 에러가 나도 렌더링이 되어야 한다..

  1. 커스텀 쿼리 훅에서 에러를 처리한다.

리액트 쿼리 5버전부터는 useQuery의 onSuccess / onError / onSettled 옵션이 deprecated 될 예정이다.

대신 훅을 사용하는 쪽에서 status로 판단해서 에러를 처리하면 된다.

일단 커스텀 쿼리 훅 내부에서 처리는 힘들 것 같고, enabled 옵션으로 애초에 쿼리를 호출하지 않는 방법이 있을 것 같다.

  1. 호출하는 함수에서 에러를 처리한다.

try / catch로 에러를 처리할 수 있겠지만, 이렇게 하면 커스텀 쿼리 훅에서 에러를 처리할 수 없다.

그럼 어떻게 하지?🤔🤔​

오늘 회의 때 프론트 팀원들에게 이 고민에 대해서 의견을 물어봤다.

결론은 토큰 유무를 판단하는 유틸 또는 훅을 만들어서 커스텀 쿼리 훅 옵션의 enabled에 넣어주는 것이다.

// isLogin.ts
export function isLogin() {
  const { accessToken, refreshToken } = getCookies();

  if (accessToken && refreshToken) {
    return true;
  }

  return false;
}
// apis/auth/quries.ts
export function useGetUserInfo(params: UserInfoParams) {
  return useSuspenseQuery(Keys.userInfo(params), () => getUserInfo(params), {
    enabled: isLogin(),
  });
}

이렇게 하면 토큰이 없을 때는 쿼리가 호출되지 않는다.

로직 정리​

상황 1. 토큰이 없을 때(로그인을 하지 않았을 때)

  1. isLogin 함수를 호출한다.
  2. isLogin 함수에서 false를 반환한다.
  3. useGetUserInfo 함수에서 enabled 옵션으로 isLogin 함수를 호출한다.
  4. isLogin 함수에서 false를 반환했으므로 useGetUserInfo 함수에서 쿼리를 호출하지 않는다.

상황 2. 토큰이 있을 때(로그인을 했을 때 && 토큰이 만료되지 않았을 때)

  1. isLogin 함수를 호출한다.
  2. isLogin 함수에서 true를 반환한다.
  3. useGetUserInfo 함수에서 enabled 옵션으로 isLogin 함수를 호출한다.
  4. isLogin 함수에서 true를 반환했으므로 useGetUserInfo 함수에서 쿼리를 호출한다.

상황 3. 토큰이 있을 때(로그인을 했을 때 && 토큰이 만료되었을 때)

  1. isLogin 함수를 호출한다.
  2. isLogin 함수에서 true를 반환한다.
  3. useGetUserInfo 함수에서 enabled 옵션으로 isLogin 함수를 호출한다.
  4. isLogin 함수에서 true를 반환했으므로 useGetUserInfo 함수에서 쿼리를 호출한다.
  5. useGetUserInfo 함수에서 쿼리를 호출한다.
  6. getUserInfo 함수의 커스텀 ky 인스턴스에서 에러가 발생한다.
  7. ky hook에서 에러코드가 401일 때 refreshToken을 갖고 새로운 accessToken을 발급받는다.
  8. accessToken이 발급되면 재요청을 한다.

내일 할 일​

  • 카공실록 개발
  • gloddy 개발