OrvalでAxiosのカスタムインスタンスを使う

はじめに

Orvalを使ってHooksを作成しました。
https://zenn.dev/collabostyle/articles/b08a64a1d3ad1c

しかし、こちらの記事のやり方では、axiosのデフォルトのBaseUrlを設定しており、
一つのフロントエンドで複数のサーバにリクエストを送る際に困ってしまいます。
そこで、困らないためにもaxiosのカスタムインスタンスが使われるようにしたいと思います。

インストールなど

OpenApiドキュメントのサンプルとツールインストールは以下の記事の通りに行います。
https://zenn.dev/collabostyle/articles/a47d3a31b27650#組み込むプロジェクトを作成します

カスタムインスタンスを作成する

カスタムインスタンスを作成します。
AXIOS_INSTANCEをほかのファイルで変更することで、カスタムインスタンスの設定を変更できます。

src/lib/custom-instance.ts

import Axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";

export const AXIOS_INSTANCE = Axios.create();

export const customInstance = <T>(
  config: AxiosRequestConfig,
  options?: AxiosRequestConfig
): Promise<AxiosResponse<T>> => {
  const source = Axios.CancelToken.source();
  const promise = AXIOS_INSTANCE({
    ...config,
    ...options,
    cancelToken: source.token,
  }).then((data) => data);

  // @ts-ignore
  promise.cancel = () => {
    source.cancel("Query was cancelled");
  };

  return promise;
};

export type ErrorType<Error> = AxiosError<Error>;

export type BodyType<BodyData> = BodyData;

設定ファイルの作成

orval.config.ts

import { defineConfig } from "orval";

export default defineConfig({
  backend: {
    input: {
      target: "./openapi/openapi.oas3.yml",
    },
    output: {
      target: "./src/api/backend.ts",
      clean: true,
      client: "react-query",
      override: {
        mutator: {
          path: "./src/lib/custom-instance.ts",
          name: "customInstance",
        },
      },
    },
  },
});

組み込む

以下の記事のようにファイルを作成します。
https://zenn.dev/collabostyle/articles/b08a64a1d3ad1c#組み込んでみる

AxiosProviderは以下のようにします。

src/app/AxiosProvider.tsx

"use client";

import { AXIOS_INSTANCE } from "@/lib/custom-instance";

export default function AxiosProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  AXIOS_INSTANCE.defaults.baseURL = "http://localhost:8080";

  return children;
}

以上でカスタムインスタンスの導入完了です!

おわりに

これでBaseUrlだけでなくヘッダーなどの設定も可能になります😊