React(TypeScript)でAxiosを使ってエラーのレスポンスを受け取りたい

はじめに

Axiosを利用していて、正常レスポンスの中身を取得する操作はよくありますが、エラーのレスポンスからAPIで送ったエラーメッセージを取得する方法に時間をとられたのでまとめます

問題

新規ユーザー登録のAPIで重複したメールアドレスを登録すると以下のレスポンスを返すようにします

{
    "message": "登録済みのメールアドレスです",
    "status": 400,
    "error": "bad_request"
}

このエラーをAxiosのcatchで取得したいです

useAuth.tsx

    axios
      .get(ユーザー登録のAPIのURL)
      .then((res) => {
        if (res.data) {
          console.log(res.data);
          setLoading(false);
        } else {
          setLoading(false);
        }
      })
      .catch(() => {
        setLoading(false);
      });

解決方法

TypeScriptを入れているので上で返却値の型のinterfaceを作ります
そしてAxiosErrorでレスポンスを取得してエラーを取得しました

useAuth.tsx

interface ErrorData {
  message: string;
  status: number;
  error: string;
}

(省略)

        .catch((e: AxiosError<ErrorData>) => {
          if (e.response === undefined) {
            console.log(new Error("データ取得に失敗しました"));
            toaster("データ取得に失敗しました", "error");
            return;
          }

          setLoading(false);
          console.log(new Error("登録済みのメールアドレスです"));
          toaster(e.response.data.message, "error");
        });

エラーの内容をトーストで表示するために以下のコードを書いています

toaster(e.response.data.message, "error");

おわりに

型推論でうまくいってしまっている箇所が多いため、TypeScriptにまだ慣れていない気がします
このような型を設定する場面になるとどうすればよいかとなってしまうので復習が必要そうです

参考