始める

まずtyped-rx-http Coreクライアント自体の使い方を説明し、その後必要なプロジェクトでのみプロジェクト所有の共通HTTPアダプターとSwagger自動生成サービスを接続する方法を説明します。

1. インストール

bash

2. 自動生成なしでCore clientを直接使用

まず最も基本的な使い方は createHttpClient<Paths>()でclientを一度作成し、そのclientのcallApiを呼び出すことです。PathsはOpenAPIで生成されたpathsタイプが一般的ですが、同じ構造と互換性のある独自に定義したタイプも使用できます。

httpClient.ts

返り値は常にObservableです

callApiとcallApiStreamはPromiseではなくRxJS Observableを返します。一度の応答をasync関数で使用する場合のみfirstValueFromまたはlastValueFromで明示的に変換し、複数の値が続くリクエストはpipeやsubscribeで処理します。

3. 選択: rxjsHttpService/commonServiceとは何か

ドキュメントでrxjsHttpService.tsまたはcommonService.tsと呼ばれるものは、ライブラリが自動生成する固定ファイル名ではありません。プロジェクトが直接所有するHTTPアダプターファイルです。自動生成されたRESTサービスがそれぞれcreateHttpClientを作成せず、このファイルがエクスポートするcallApi/callApiStream/cache関数を共通のエントリーポイントとして使用します。

最小の形は、以下の全コードのようにheaderStoreとcreateHttpClientを一度作成し、ライブラリのメソッドをプロジェクト関数として再エクスポートすることです。自動生成サービスでキャッシュ機能を使用しない場合、この程度の構成だけで構造を理解できます。

rxjsHttpService.ts

実際のNext.jsプロジェクトでセッション認証、SSRリクエストごとのCookie/Authorization、CSRキャッシュとSSRキャッシュを一つのファイルで共通処理するには、以下のように拡張できます。このファイルも自動生成物ではなく、プロジェクトコードです。

rxjsHttpService.ts

commonServiceFileが指すのはまさにこのファイル

OpenAPIジェネレーターのcommonServiceFileは、上記ファイルを生成するオプションではありません。generated serviceがcallApi、callApiStream、callApiClientCacheまたはcallApiServerCacheをインポートするプロジェクトファイルのパスを指定します。したがって、ジェネレーターを設定する前にこのファイルの役割とエクスポートを先に決める必要があります。

4. 選択: Swagger自動生成サービスを使用する場合

OpenAPIサービス生成器を接続した後は、画面でURLとresponse typeを再記述しません。生成された関数をインポートし、必要なpath、params、bodyのみを渡します。

MemberSearchPage.tsx

tsx

次の文書

HTTPクライアント

実際のcommonService全体のコードと各構成要素の役割を確認します。

クイックスタート

ライブラリ自体の使用法全体をまず確認した後、WebFlux + Swagger自動生成プロジェクトのフロント/バックエンドの実際の呼び出し例を続けて確認します。

OpenAPI Generator

swagger.jsonでタイプとサービスが生成されるルールを確認します。