react-query global Error type 지정하기

react-query v5 버전을 기준으로 작성된 문서입니다.

서버에서 받는 에러 객체가 아래와 같은 타입을 가지고 있었음

data: {
    detail: string;
    messageKey: string;
    status: number;
    title: string;
    type: string;
    unexpected: boolean;
  };

   mutate(
        { data },
        {
          onSuccess: ...
          },
          onError: (error) => {
            if (error.data.status === 401) {
             console.log('401입니다.')
            }
          },
        }
      );

위와 같은 코드 작성시 에러가 발생한 경우, 에러 타입 지정되어 있지 않아서 아래의 타입스크립트 에러가 생김.

Property 'data' does not exist on type 'Error'.ts(2339)

그래서 전역으로 리액트 쿼리에서의 에러 객체에 대한 타입을 지정해줬다.

// types/index.d.ts
declare interface ResponseError {
  data: {
    detail: string;
    messageKey: string;
    status: number;
    title: string;
    type: string;
    unexpected: boolean;
  };
}

//index.d.ts
import '@tanstack/react-query';

declare module '@tanstack/react-query' {
  interface Register {
    defaultError: ResponseError;
  }
}

타입스크립트 빨간불 없이 깔끔하게 에러 핸들링!

참고
리액트 쿼리 공식문서 - Registering-global-meta