[TIL] 221114

먼지·2022년 11월 14일

TIL

목록 보기

43/57

React Query 에러 핸들링

하나씩 읽고 이해하고 정리하기

참고
react-query 에러 처리시 주의할 점
React-query의 에러 핸들링
React-Query Error Boundary
[React] 에러 바운더리(Error Boundary)
[Javascript] 에러 처리 방법

리액트 쿼리 에러 타입

반환되는 Promise 데이터가 다를 때 api 함수에서 return 타입을 지정했다 사용하는 컴포넌트에서 react query가 그 값을 읽어오지 못했는데, throw로 에러데이터를 던지게 만들었기에 error 값을 읽는 방법을 구글링하다 useQuery에서 어떻게 타입을 지정하는지 찾았다

What's the type of React Query's Error and how to handle different cases?
error는 무엇이든 던질 수 있기 때문에 기본적으로 unknown이 지정됨. axios를 사용하는 경우 AxiosError 제네릭? 유형을 제공

useQuery<Todo[], AxiosError>(['todos'], fetchTodos)

// 적용
  const { data, error } = useQuery<GetChallenge, { errorCode: string; message: string }>(
    ['Challenge', id],
    () => getChallengeRequest(Number(id)),
    {
      retry: 1,
      refetchOnWindowFocus: false,
    }
  );

리액트 에러

챌린지 정보 페이지에 접속했는데 로그인되지 않은 상태일 때, 로그인 요청을 하거나 아닐 때 null을 했는데 두 에러가 콘솔에 떴다

export default function Challenge() {
  const location = useLocation();
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const { data, error } = useQuery<GetChallenge, { errorCode: string; message: string }>(
    ['Challenge', id],
    () => getChallengeRequest(Number(id)),
    {
      retry: 1,
      refetchOnWindowFocus: false,
    }
  );
  
  if (error?.errorCode === 'REQUEST_NOT_INCLUDE_TOKEN') {
    if (confirm('로그인 하시겠습니까?')) {
      navigate('/register', {
        state: { path: location.pathname },
      });
      return null;
    }
    return null;
  }

  if (error?.errorCode === 'BAD_REQUEST') return <Error message={error.message} />;
      
  ...

Nothing was returned from render.

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
렌더링에서 아무것도 반환되지 않았습니다. 이는 일반적으로 return 문이 누락됐음을 의미함. 또는 아무것도 렌더링하지 않으려면 null을 반환하시오

설명대로 return; 만 작성해서 생긴 에러 같음 return null;로 해결함.

Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`...`)

이건 두 번째 본 에러..!
a component (BrowserRouter) while rendering a different component (Challenge). To locate the bad setState() call inside Challenge, follow the stack trace as described in
Challenge 컴포넌트를 렌더링 하는 동안 BrowserRouter 컴포넌트 내부에서 잘못된 setState() 호출을 찾으려면 설명된 대로 스택 추적을 따르시오

Warning: Cannot update a component (BrowserRouter) while rendering a different component (FormSocialIcon)
나랑 비슷한 경우를 찾아서 useEffect로 해결했다.