Nuxt.jsでopenapi-generatorを使って型セーフなAPI呼び出しを実現する

先日axiosをpluginでラッピングする記事を書きましたが、結局のところフロント側でAPIクライアントを手書きするのはリスクがあるので、サーバーサイドから提供されるopenapi.jsonから安全にAPIを呼び出せるようにしようと思います。

(2021/07/11追記)
JWTによる認証したい場合のやり方について記載しました

openapi-generator呼び出し用のスクリプトを追加

Dockerでopenapi-generatorを使います。
npmでもあるんですが、JREのインストールが別途必要なのでDockerの方が楽です。

ただ、コマンドが長いのでpackage.jsonに追加してnpm runで実行できるようにしておきます

package.json

"scripts" {
  ・・・
  "generate:api-client": "docker run --rm -v ${PWD}:/local openapitools/openapi-generator-cli generate -i http://host.docker.internal/api-json -g typescript-axios -o /local/openapi"
}

※検証環境はNestJSでOpenAPI対応のAPIサーバーを立てています
　→https://localhost/api-json でopenapi.jsonが取得できるのでおすすめです
　ローカルにopenapi.json/yml等あれば、-iオプションの引数は適宜変更してください

APIクライアントを作成

上記で追加したスクリプトを実行します

npm run generate:api-client

成功するとopenapiディレクトリが作成されます

pluginで呼び出せるようにする

以下の対応だけでthis.$api.xxxx()でAPIが呼び出せます。
※xxxxのメソッド名はopenapi.jsonにてoperationIdで指定した名前になります

• declareでthis.$apiに型定義します
• Vue.prototype.$api = new TodoApi();でAPIクライアントの実体を定義します

plugins/api-client.ts

import Vue from 'vue';
import { TodoApi } from '~/openapi';

declare module 'vue/types/vue' {
  interface Vue {
    $api: TodoApi;
  }
}

Vue.prototype.$api = new TodoApi();

※クラス名はopenapi.jsonのschemaに依存するので、各自のAPIに合わせて修正してください