【Nuxt 3】Aspidaで複数のbaseURLを使う

前提

• Nuxt 3（Aspida 含む）＋ TypeScript 環境
• Aspida で Rails API(バックエンド) と WordPressをヘッドレスCMSとして同時に利用

最初に書いた aspida.config.js

複数の input を配列で渡してbaseURLも配列内に記載したので、これでrailsとwpでAPI事にエンドポイントを分けていたつもりでした。

/** aspida.config.js */
module.exports = [
  {
    input: 'api/rails',
    outputEachDir: true,
    baseURL: 'http://localhost:8080/api/v1',
    outputMode: 'normal',
  },
  {
    input: 'api/wp',
    outputEachDir: true,
    baseURL: 'https://wordpress.com/wp-json/wp/v2',
    outputMode: 'normal',
  },
];

実際に実行してみると、Wordpress側のクライアントでも、Rails製のバックエンドサーバーのエンドポイントが参照されていました。Nuxt configなどをチェックしても特に問題もなかったため複数base_URLを使う方法を調べてきます。

結果

Githubを見ると、複数のbase_URLを使うのは無理そうですね。（設定ファイル的に行けそうな雰囲気が合ったので、初めて使うときミスりました）

Aspida Github

クライアントを統合して管理

ということで安直ですが、Nuxtのプラグイン層で **API ごとにクライアントを生成し合成します。

// plugins/api.ts
import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
import apiWp    from '@/api/wp/$api';
import apiRails from '@/api/rails/$api';
import aspida   from '@aspida/fetch';

export default defineNuxtPlugin(() => {
  const config  = useRuntimeConfig();

  const wpBase  = config.public.wpBase;   // nuxt configに必ず記載
  const apiBase = config.public.apiBase;

  if (process.dev) {
    console.info('[api] wpBase  =', wpBase);
    console.info('[api] apiBase =', apiBase);
  }

  /** WordPress 用クライアント */
  const clientWp = apiWp(
    aspida(undefined, {
      baseURL: wpBase,
      throwHttpErrors: true,
    }),
  );

  /** Rails 用クライアント */
  const clientRails = apiRails(
    aspida(undefined, {
      baseURL: apiBase,
      throwHttpErrors: true,
    }),
  );

  return {
    provide: {
      api: {
        ...clientWp,
        ...clientRails,
      },
    },
  };
});

作成したら、忘れずに利用できるようモジュール拡張をnuxt.d.tsに書き込みます。

// types/nuxt.d.ts

import type { ApiInstance as RailsApiInstance } from '@/api/rails/$api';
import type { ApiInstance as WpApiInstance } from '@/api/wp/$api';

type UnifiedApi = WpApi & RailsApi;

declare module 'nuxt/app' {
  interface NuxtApp {
    $api: UnifiedApi;
  }
}

export {};

Vueファイル側では下記のように記載（例）

<script setup lang="ts">
  import { useNuxtApp } from 'nuxt/app';

  const { $api } = useNuxtApp();

    const posts   = await $api.posts.$get();      // WordPress
    const halls   = await $api.halls.$get();      // Rails
</script>

4. まとめ

1. aspida.config.js では input のみ指定し、baseURL には依存しない
2. Nuxt プラグインで APIごとにクライアントを生成し統合