CRUD API をシミュレートする
アプリをビルドするときは、多くの場合、バックエンド API と対話します。 これらの API がまだ利用できない場合や、他のチームが最新の要件を満たすように API を更新している場合があります。 待機を回避するには、通常、必要なデータを返すモック API を作成します。 この方法ではブロックが解除されますが、最終的に実際の API に置き換える API の構築に時間を費やす必要があります。 時間の無駄を避けるために、開発プロキシを使用して CRUD API をシミュレートし、開発を高速化できます。
CrudApiPluginを使用すると、メモリ内データ ストアを使用して CRUD (作成、読み取り、更新、削除) API をシミュレートできます。 単純な構成ファイルを使用して、モック API でサポートされる URL と返されるデータを定義できます。 このプラグインでは、クライアント側アプリケーションからのクロスドメイン使用に対する CORS もサポートされています。
MockResponsePluginで静的モック応答を定義できる場合、CrudApiPluginを使用すると、動的モック API を定義できます。これを使用して、データを操作し、変更がモック データ セットに反映されることを確認できます。
シナリオ
たとえば、ユーザーが顧客を管理できるアプリを構築しているとします。 データを取得するには、バックエンド API の /customers エンドポイントを呼び出す必要があります。 バックエンド チームが作業を完了するのを待つのを避けるために、開発プロキシを使用して API をシミュレートし、必要なデータを返します。
まず、 CrudApiPlugin を有効にし、 customers-api.json ファイルを使用するように構成します。
{
"name": "CrudApiPlugin",
"enabled": true,
"pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
"configSection": "customersApi"
}
{
"customersApi": {
"apiFile": "customers-api.json"
}
}
customers-api.json ファイルでは、顧客のモック API を定義します。
{
"$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.14.1/crudapiplugin.schema.json",
"baseUrl": "https://api.contoso.com/v1/customers",
"dataFile": "customers-data.json",
"actions": [
{
"action": "getAll"
},
{
"action": "getOne",
"url": "/{customer-id}",
"query": "$.[?(@.id == {customer-id})]"
},
{
"action": "create"
},
{
"action": "merge",
"url": "/{customer-id}",
"query": "$.[?(@.id == {customer-id})]"
},
{
"action": "delete",
"url": "/{customer-id}",
"query": "$.[?(@.id == {customer-id})]"
}
]
}
baseUrl プロパティでは、モック API のベース URL を定義します。 dataFileプロパティでは、顧客のモック データを含むファイルを定義します。 actionsプロパティでは、サポートされるアクションと、それらが HTTP メソッドと URL にどのようにマップされるかを定義します。 API を使用して以下を行う必要があります。
- を呼び出して、すべての顧客を取得します。
GET /v1/customers - を呼び出すことで、単一の顧客を取得します。
GET /v1/customers/{customer-id} POST /v1/customersを呼び出して、新しい顧客を追加するPATCH /v1/customers/{customer-id}を呼び出して顧客を更新する- を呼び出して顧客を削除する
DELETE /v1/customers/{customer-id}
URL では、 {customer-id} パラメーターを使用します。このパラメーターは、プラグインによって URL の実際の顧客 ID に置き換えられます。 また、このプラグインでは、JSONPath クエリの {customer-id} パラメーターを使用して、データ ファイル内の顧客を検索します。
customers-data.json ファイルでは、顧客のモック データを定義します。
[
{
"id": 1,
"name": "Contoso",
"address": "4567 Main St Buffalo, NY 98052"
},
{
"id": 2,
"name": "Fabrikam",
"address": "4567 Main St Buffalo, NY 98052"
}
]
開発プロキシを起動し、 https://api.contoso.com/v1/customers エンドポイントを呼び出します。 開発プロキシは要求をインターセプトし、顧客のモック データを返します。
[
{
"id": 1,
"name": "Contoso",
"address": "4567 Main St Buffalo, NY 98052"
},
{
"id": 2,
"name": "Fabrikam",
"address": "4567 Main St Buffalo, NY 98052"
}
]
次のステップ
CrudApiPlugin の詳細を確認します。
サンプル
関連する開発プロキシのサンプルも参照してください。
Dev Proxy