react-query의 onError는 Deprecated 되었다.

😁왜 그렇게 생각했지?

reactquery onerror deprecated

https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

Breaking React Query's API on purpose

라고 하면 리액트쿼리를 다루는 블로그 중 가장 인지도가 높.(다고생각하는)

tkdodo의 블로그에서 이 글을 읽었기 때문인 것 같다.

 

그런데 그때는 너무 스르륵 읽듯이 읽어서 본질을 파악하지 못했는데

결론적으로 말하면 useQuery의 onSucces, onSettled, onError 사용을 막는다는 취지의 글이었습니다.

예상대로 동작하지 않을 가능성인 높은 API 이기 때문이라고하네요

  const errorHandler = useError();
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        suspense: true,
        retry: 0,
        onError: () => errohandler XXX
      },
    },
  });

이렇게 queries에 onError와 같은 형식으로 옵션을 주면

다음 버전에서 deprecated될 예정이라는 메시지를 받게됩니다.

 

tkdodo의 포스트를 참고하면 그 대신 이렇게 작성할 것을 권장합니다.

const Providers = ({ children }: ProvidersProps) => {
  const errorHandler = useError();
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        suspense: true,
        retry: 0,
      },
      mutations: {
        onError: errorHandler,
      },
    },
    queryCache: new QueryCache({
      onError: () => errorHandler,
    }),
  });

querycache를 이용해서 전역 캐시 단계에서 콜백을 사용하는 것으로

이 onError 함수는 쿼리당 한번만 호출될 것이고 클로저 문제도 해소됩니다.

 

또한 mutation의 onError 핸들링을 막는것이 아닌

query의 사용을 제한하는 것이기때문에 mutations에 대한 onError 핸들링은 문제없이 가능합니다.

---

onError 함수는 에러의 전파를 막을까?

조금 당연할지도 모르겠지만..

이렇게 온에러함수에서 에러에 대한 동작을 수행해도

에러는 콜스택의 끝까지 전파됩니다.

onError: (error: AxiosError) => {
      console.log('온에러함수에서');
      switch (error.response?.status) {
        case 400:
          toast({
            content: '400에러 로그인에 실패했습니다.',
            type: 'warning',
          });
          break;
        case 500:
          toast({
            content: '500에러 로그인에 실패했습니다.',
            type: 'warning',
          });
          break;
        default:
          toast({
            content: '로그인에 실패했습니다.',
            type: 'warning',
          });
          break;
      }
    },

AxiosError 객체의

error.response.status에 접근하면 상태코드를 얻을 수 있기때문에

이를 근거로 스위치문을 돌려주면 됩니다.