メインコンテンツまでスキップ

APIクライアントの作成

ToDoアプリでは各画面でTodoServiceからデータを取得しますが、TodoServiceから直接REST APIを呼びだすのではなく共通的なAPIクライアントを用意します。 APIクライアントは、APIと通信し、JSONとOpen APIドキュメントで定義されているモデルとの型変換や共通的なエラー処理を担当します。

Open APIドキュメントから自動生成​

ToDoアプリでは、Open APIドキュメントからAPIクライアントを自動生成します。

クライアントコードの生成には、OpenAPI Generatorを使用します。OpenAPIが提供しているツールで、OpenAPIドキュメントから様々なものを生成できます。TypeScript用のクライアントコードについても様々な実装を生成できますが、ここではtypescript-fetchを使用します。

自動生成で利用するOpenAPIドキュメントはmobile-app-hands-on-backendで公開されているものを利用します。

npxか、package.jsonにnpm scriptを追加してAPIクライアントを自動生成してください。

以下のようにnpxで生成してください。

npx @openapitools/openapi-generator-cli generate -g typescript-fetch -i https://raw.githubusercontent.com/fintan-contents/mobile-app-hands-on-backend/main/rest-api-specification/openapi.yaml -o src/backend/generated-rest-client --additional-properties supportsES6=true,typescriptThreePlus=true
注記

プロキシ環境下では、npmパッケージの@openapitools/openapi-generator-cliを使用すると次のようなエラーになる場合があります。

Unable to query repository, because of: "Request failed with status code 400"

@openapitools/openapi-generator-cliは、Maven Central Repositoryからorg.openapitools:openapi-generator-cliのjarのダウンロードを試みますが、そこでエラーになっているようです。

この場合は、以下の手順でAPIクライアントを自動生成してください。

  1. openapi-generator-cliのjarをここからダウンロード
  2. 以下のコマンドを実行
java -Dhttp.proxyHost=[プロキシホスト] -Dhttp.proxyPort=[プロキシポート] -Dhttps.proxyHost=[プロキシホスト] -Dhttps.proxyPort=[プロキシポート] -jar openapi-generator-cli-6.2.1.jar generate -g typescript-fetch -i https://raw.githubusercontent.com/fintan-contents/mobile-app-hands-on-backend/main/rest-api-specification/openapi.yaml -o src/backend/generated-rest-client --additional-properties supportsES6=true,typescriptThreePlus=true

APIクライアントの簡単な説明​

それでは、自動生成されたAPIクライアントを簡単に見ていきましょう。 APIクライアントはsrc/backend/generated-rest-client に作成されています。

todo_app
└─src/backend
     └─generated-rest-client
        ├─apis/
        ├─models/
        └─runtime.ts

apisにはREST APIを呼びだすための部品（TodosApi.ts）があり、modelsにはAPI呼び出しのInput,Outputになるモデルが生成されています。 APIクライアントを利用するとエラーレスポンス（ステータスコードが4xxまたは5xx系）の場合、Promise.reject されるため、エラーとしてハンドリングできます。

runtime.tsでは、すべてのREST APIの呼びだしに共通する機能が実装されています。この中でREST APIへの接続先も定義されているのですが、OpenAPIドキュメントのserverに指定されている値がデフォルト値として設定されています。

src/backend/generated-rest-client/runtime.ts
export const BASE_PATH = "http://localhost:9080/api".replace(/\/+$/, "");

デフォルトでは接続先がlocalhostとなっているため、このままではAPIサーバを起動しているマシン以外のデバイスやAndroidエミュレータなどからアクセスできません。

接続先を変更するために、backendディレクトリに接続先を設定するためのモジュールを追加します。再生成したときに修正漏れが発生しないように、自動生成したファイルは修正しないでください。 また、自動生成したAPIクライアントや設定モジュールをTodoServiceから利用しやすいようにindex.tsも作成します。

次のようにbackendディレクトリにconfig.tsとindex.tsを作成してください。

${端末のIP}にはAPIサーバへの接続確認で確認したIPを設定してください。

src/backend/config.ts
import {Configuration} from './generated-rest-client';
export const config = new Configuration({basePath: 'http://${端末のIP}:9080/api'});
src/backend/index.ts
export * from './generated-rest-client';
export * from './config';

これで、TodoServiceからREST APIを呼びだす準備が整いました。次は、実際にTodoServiceからREST APIを呼び出して、結果を画面に表示してみましょう。

に最終更新