CRUD API をシミュレートする
アプリをビルドするときは、バックエンド API と対話することが多いです。 これらの API がまだ使用できない場合や、他のチームが最新の要件を満たすように API を更新している場合があります。 待機を回避するには、通常、必要なデータを返すモック API を作成します。 この方法ではブロックが解除されますが、最終的には実際の API に置き換える API の構築に時間を費やす必要があります。 時間の無駄を避けるために、開発プロキシを使用して CRUD API をシミュレートし、開発を高速化できます。
を CrudApiPlugin使用すると、メモリ内データ ストアを使用して CRUD (作成、読み取り、更新、削除) API をシミュレートできます。 単純な構成ファイルを使用すると、モック API でサポートされる URL と、それが返すデータを定義できます。 このプラグインでは、クライアント側アプリケーションからのクロスドメイン使用に対する CORS もサポートされています。
MockResponsePluginでは静的モック応答を定義できます。では、 を使用して、データを操作し、CrudApiPluginモック データ セットに反映された変更を確認するために使用できる動的モック API を定義できます。
シナリオ
たとえば、ユーザーが顧客を管理できるアプリを構築しているとします。 データを取得するには、バックエンド API のエンドポイントを /customers 呼び出す必要があります。 バックエンド チームが作業を完了するのを待つのを避けるために、Dev Proxy を使用して 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 に置き換えます。 また、このプラグインでは、 {customer-id} JSONPath クエリの パラメーターを使用して、データ ファイル内の顧客を検索します。
ファイルでは 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 呼び出します。 Dev Proxy は要求をインターセプトし、モック顧客データを返します。
[
{
"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 のサンプルも参照してください。
Dev Proxy