1주차 minjupar : React Query v4

[6mn12j]

안녕하세요 1주차 ReactQuery(TanstackQuery) 관련 개념 알아보고 도입해 봤습니다!
혹시 ReactQuery 사용해 보신 분들 중에서 ReactQuery로 전역적인 Error처리를 하셨다면 어떻게 하셨는지 궁금합니다.

React Query

스터디 내용

• 공식 문서 위주로 리액트쿼리에 대한 내용을 정리함.

• 실제 프로젝트에 적합하다고 판단하여 브랜치를 생성 후 적용 해봄.

• [적용한 브랜치 링크] (ReactQuery 도입 innovationacademy-kr/24hane-frontend#25)

• [정리한 내용] (https://velog.io/@6mn12j/React-Query)

[rkskekzzz]

와 저 select 있는 줄 몰라서 axios interceptor에서 벗겨서 썼었는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이럴수가.. 충격적입니다..

변경한 코드도 너무 잘 봤습니다!
커밋 내역 들어가서 수정한 코드도 봤는데 ProtectedRoute코드에서 Outlet을 활용하면 코드가 좀 더 깔끔해 질 것 같습니다!! 그리고 useNavigation hook을 사용하기보단 Navigate라는 wrapping component를 사용하면 더 좋아보입니다!

const ProtectedRoute = () => {
  if (fail) {
    return <Navigate to={'/'} replace />;
  }
  return <Outlet />;
};

const App = () => {
  return (
       ...
        <Routes>
          <Route path="/anony" element={<Entrance />} />
          <Route element={<ProtectedRoute />}>
            <Route path="/protected" element={<SomeProtected />} />
            ...
          </Route>
        </Routes>
       ...
  );
}

전역 error에 대해서는 기준을 정하는게 우선일 것 같아요!
서버측에서 발생하는 에러인지, ui state가 변경되어야 하는 에러인지 등등 상황에 맞게 처리하는 위치가 달라질 것 같아요! 이전에 참고한 블로그에서는 api 호출 에러는 axios interceptor에서, 응답에러 중 500에러와 400에러는 기준에 따라 query메서드에서 처리하거나 react suspense를 사용한다고 하더라구요!
저도 에러 처리에 대한 부분은 다음에 주제로 다뤄볼 예정이라 나중에 더 공부하게 되면 서로 피드백 하면 좋을 것 같습니당!

코드 리뷰 더 하고싶었으나 너무 졸려서 다음에 또 하겠습니다 ㅎㅎ..

[6mn12j]

• 셀렉트 옵션이 진짜 편하더라구요 axios interceptor 에서 data 벗겨서 리턴해서 저도 사용 해봤었는데 그때는 API 요청 받고 성공시에는 data, 실패 시에는 status 코드 값에 따라서 에러 처리가 필요해서 interceptor에서 분기처르릴 해야하는 부분이 생기더라구요 결국 그 방법은 사용하지 못했습니다 ㅠㅠ
  이런 점에서 셀렉트는 성공했을때만 실행된다는것도 참 좋은거 같아요 !

• Outlet 사용하니까 훨씬 코드가 깔끔해진거 같습니다 ! 적용해봐야겠어요 감사합니다.

• error 처리 같은경우 지금은 모든API요청에 인증되어있지 않은 사용자면 401 에러를 보내는데 이부분을 일단은 interceptor 를이용해서 401 에러일때는 window.location.href를 써서 홈으로 보내는데 ReactQuery에서 따로 지원해주는게 있는지 이렇게 사용해도 되는지 라는 고민을 했습니다. 검색해볼때 suspense를 함께 사용하는 글들도 있었는데 더 알아봐야 될거 같아요 !! 다음에 주제로 다뤄보게 되면 재밌을거 같습니다 !
  리뷰 감사합니닷

instance.interceptors.response.use((response: AxiosResponse) => {
  if (response.status === 401) window.location.href = "/";
  else return response;
});