Nx ReactのプロジェクトにOpen-Apiを利用する

Nx ReactのプロジェクトにOpenApiを記載して、Swaggerを利用したLibを作成するやり方。

TL;DR

libsを作成後、run commandに記載して作成する.

Steps

Prerequired

• Java
• nxでのreactのProject

1. api libを作成する
2. open-api generatorを入れる
3. libsにカスタムコマンドを作成する

1. Api Libを作成する

api requestを実施するためのlibs/apiを作成します。

$ nx g lib api

作成完了後に以下の様なディレクトリになってると思います。

$ tree ./libs  -L 3   
./libs
└── api
    ├── README.md
    ├── babel-jest.config.json
    ├── jest.config.js
    ├── src
    │   ├── api
    │   ├── api.ts
    │   ├── base.ts
    │   ├── common.ts
    │   ├── configuration.ts
    │   ├── git_push.sh
    │   ├── index.ts
    │   └── model
    ├── swagger.json
    ├── tsconfig.json
    ├── tsconfig.lib.json
    └── tsconfig.spec.json

次に、custom commandを作成します。

2. open-api generatorを入れる

通常通りにopen-api cliをインストールします。

ちなみに、javaがはいっていないとコマンドの利用できないので、dockerniseの方もありかなと。

$ yarn add -D @openapitools/openapi-generator-cli

次にcustom commandを作成します。

3. libsにカスタムコマンドを作成する

カスタムコマンドを作成した時に、
What command would you like to run?
と聞かれますので、利用したいコマンドを記載します。

今回はopen-api generator axiosを利用するので、以下の様に(解説はcliみて)作成していきます。

$ nx generate run-commands generate --project=api
? What command would you like to run? node_modules/.bin/openapi-generator-cli generate -g typescript-axios -i libs/api-request/swagger.json -o libs/api-request/src/open-api --api-package=api --model-package=model --additional-properties=withSeparateModelsAndApi=true

次にコマンドを利用していきます。

4. 使い方

さきほど作成した、コマンドの動作検証を実施していきます。

$ nx run api:generate

作成が完了するといかの様なディレクトリ構成になるかと思います。

$  tree ./libs  -L 3       
./libs
└── api
    ├── README.md
    ├── babel-jest.config.json
    ├── jest.config.js
    ├── src
    │   ├── api
    │   ├── api.ts
    │   ├── base.ts
    │   ├── common.ts
    │   ├── configuration.ts
    │   ├── git_push.sh
    │   ├── index.ts
    │   └── model
    ├── swagger.json
    ├── tsconfig.json
    ├── tsconfig.lib.json
    └── tsconfig.spec.json

以上で作成完了です。
利用の仕方は通常のOpenApi Genratorで作成したものと特段変わりません。
レポジトリを見てもらえると、利用の仕方のイメージはつくかと思います。(Envだるくて作成してません。)
レポジトリ