Nuxt composition apiでカスタムしたaxiosを使う

composition api でカスタムした axios を使いたい

Nuxt2 系で composition api を使って開発していた時に、2 つのことなったドメインをの API を叩くことになりました。
そこで axios で baseUrl が異なる axios インスタンスを作ることにしたのですが、意外と手こずったので備忘録として残します。

axios のプラグインを作成する

まずは BaseUrl が異なる axios インスタンスを作ります。

customAxios.ts

import { Plugin } from "@nuxt/types";

const customAxios: Plugin = ({ $axios, $config }, inject) => {
  const firstCustomAxios = $axios.create($config.FIRST_APP_URL);
  const secondCustomAxios = $axios.create($config.SECOND_APP_URL);

  inject("firstCustomAxios", firstCustomAxios);
  inject("secondCustomAxios", secondCustomAxios);
};

export default customAxios;

それぞれ $config から環境変数を読み込むようにしています。
続いて Plugin に記載をします。

nuxt.config.js

...
  plugins:["@/plugins/customAxios"],
...

一旦下準備としてはこれで完了です。

useContext から使えるように型定義をする

上で準備自体はできていますが、このままだと使うことができません。
今回は試験的に使いたいので、context から上のカスタムした axios を呼び出せるように型定義をします。

vue.d.ts

import { NuxtAxiosInstance } from "@nuxtjs/axios";

declare module "@nuxt/types" {
  ...
  // contextから呼び出す
  interface Context {
    ...
    $firstCustomAxios: NuxtAxiosInstance;
    $secondCustomAxios: NuxtAxiosInstance;
    ...
  }
}

上記で useContext からカスタムした axios として作成した 2 つを使うことができるようになりました。
試しに適当にそれぞれの URL を記載して

index.vue

<template>
  <h1>Test</h1>
</template>

<script lang="ts">
import {
  defineComponent,
  useContext,
  onMounted,
} from "@nuxtjs/composition-api";

export default defineComponent({
  setup() {
    const { $axios, $config, $firstCustomAxios, $secondCustomAxios } =
      useContext();

    onMounted(async () => {
      const res1 = await $firstCustomAxios.get("/xxxx");
      const res2 = await $secondCustomAxios.get("/yyy");
      console.groupCollapsed("test");
      console.log(res1);
      console.log(res2);
      console.groupEnd();
    });
  },
});
</script>

のようにやってみると異なる baseUrl で API を呼び出せているかと思います。

終わりに

結局詰まったところは最後のモジュール拡張部分でした。
inject をしているので、Context への Provide がないために useContext からプラグインを呼び出せないのでは？と思っていましたが、問題はそこではなくて、Typescript 的なところで、ちゃんと調べて考えるべきだなと感じました。
また、拡張した axios を作った感想としては、そもそもインスタンスを分けるよりも baseUrl とする値を切り替える、ないし BE を統合するように動く方が全然賢いやり方だなというところでした。
安易にインスタンスを分けるよりもより単純なやり方を考える方が良いなと思いました。