Edit

Simulate a CRUD API

At a glance
Goal: Create a dynamic mock API with full CRUD operations
Time: 15 minutes
Plugins: CrudApiPlugin
Prerequisites: Set up Dev Proxy

When building apps, you often interact with backend APIs. Sometimes, these APIs aren't yet available, or other teams are updating them to meet the latest requirements. To avoid waiting, you typically create a mock API that returns the data you need. While this approach unblocks you, it requires you to spend time on building an API that you eventually replace with the real one. To avoid wasting time, you can use Dev Proxy to simulate a CRUD API and speed up development.

Using the CrudApiPlugin, you can simulate a CRUD (Create, Read, Update, Delete) API with an in-memory data store. Using a simple configuration file, you can define which URLs your mock API supports and what data it returns. The plugin also supports CORS for cross-domain usage from client-side applications.

Where the MockResponsePlugin allows you to define static mock responses, the CrudApiPlugin allows you to define a dynamic mock API that you can use to interact with data and see your changes reflected in the mock data set.

Scenario

Say, you're building an app that allows users to manage customers. To get the data, you need to call the /customers endpoint of the backend API. To avoid waiting for the backend team to finish their work, you decide to use Dev Proxy to simulate the API and return the data you need.

You start with enabling the CrudApiPlugin and configuring it to use the customers-api.json file.

File: devproxyrc.json (plugin instance)

{
  "name": "CrudApiPlugin",
  "enabled": true,
  "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
  "configSection": "customersApi"
}

File: devproxyrc.json (config section)

{
  "customersApi": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.3.1/crudapiplugin.schema.json",
    "apiFile": "customers-api.json"
  }
}

In the customers-api.json file, you define the mock customers API.

File: customers-api.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.3.1/crudapiplugin.apifile.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "actions": [
    {
      "action": "getMany",
      "url": "?city={customer-city}",
      "query": "$.[?(@.city == '{customer-city}')]"
    },
    {
      "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})]"
    }
  ]
}

In the baseUrl property, you define the base URL of the mock API. In the dataFile property, you define the file that contains mock customer data. In the actions property, you define the supported actions and how they map to the HTTP methods and URLs. You want to use your API to:

  • get all customers, by calling GET /v1/customers
  • get a single customer, by calling GET /v1/customers/{customer-id}
  • add a new customer, by calling POST /v1/customers,
  • update a customer, by calling PATCH /v1/customers/{customer-id},
  • delete a customer, by calling DELETE /v1/customers/{customer-id}
  • get customers by city, by calling GET /v1/customers?city={customer-city}

In your URLs, you define parameters by wrapping their names in curly braces. You can define parameters in the URL path, such as {customer-id}, and in the query string, such as {customer-city}. The plugin replaces the parameters in the JSONPath query with values from the request URL to look up customers in the data file.

Important

Define actions with query-string parameters before actions that match the same HTTP method and path without query-string parameters. Dev Proxy uses the first matching action.

In the customers-data.json file, you define the mock customer data.

File: customers-data.json

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "1 Microsoft Way",
    "city": "Redmond"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St",
    "city": "Buffalo"
  }
]

You start Dev Proxy and call the https://api.contoso.com/v1/customers endpoint. Dev Proxy intercepts the request and returns the mock customer data.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "1 Microsoft Way",
    "city": "Redmond"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St",
    "city": "Buffalo"
  }
]

To get customers in Redmond, call https://api.contoso.com/v1/customers?city=Redmond. Dev Proxy captures Redmond from the city query-string parameter, substitutes it for {customer-city} in the JSONPath query, and returns the matching customers.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "1 Microsoft Way",
    "city": "Redmond"
  }
]

Next step

Learn more about the CrudApiPlugin.

CrudApiPlugin

Samples

See also the related Dev Proxy samples:

See also

  • Last updated on