.NET で Web API を作って、それを React から呼ぶということをやりたかったので、ついでだから Open API 仕様 (swagger.json (swagger.yaml)) を生成して、それを元にクライアントコードを生成して楽をしようと思いつきました。
.NET は、メソッドのシグネチャから大体の定義を生成させることができるので、タグとかをちょろっと足してあげるだけで swagger.json が作れたりします。型があるって素晴らしい。swagger.json を生成する部分はこの記事の主題ではないので詳細は公式ドキュメントに譲ります。
React から呼び出そう！
ということで適当にぐぐって openapi-typescript-codegen というものを見つけたので今回はこれを使ってみました。
使い方はとても簡単！以下のコマンドでインストール。（--legacy-peer-deps 最近お世話になる頻度が多い…いらない人はいらないと思う？)
npm install openapi-typescript-codegen --save-dev --legacy-peer-deps
あとは、こんなコマンドを叩けばクライアント側のコードが生成されます。
openapi -i ./swagger.yaml -o ./generated --name ApiClient
あとは出力先のフォルダーから ApiClient を import して以下のような感じで使えます。
const api = new ApiClient({ BASE: process.env.REACT_APP_API_ENDPOINT });
const createUserResponse = await api.users.createUser()
const responseUserId = createUserResponse.userId!;
いい感じ。
Discussion