Understanding Modify API Response Rule

The Modify Response Rule enables you to modify the response body of an HTTP request. The rule is equally important for developers and testers. Frontend developers can reduce their dependence on the backend by mocking the response they want from an API. Testers can test different edge cases by directly modifying API responses.

Content Overview

Video Guide

Use Cases

Test Frontend without Backend API

Agile Teams often face a situation where they have to develop front-end code while back-end development is also in progress. In these scenarios developing with API Contracts only is easier with a way to mock the API responses. Developers either hard-code these mocks or use an external mock server for the same. Modify Response Rule comes in handy when you have to mock an API’s response & status code. Here are the steps you can follow for the same:

1. Create a new Modify Response Rule.
2. Use your API hostname & path as source conditions like – company.com/api/path
3. In the status code use the select the status code you want.
4. In Response Body, you can select from Static or Dynamic response body as per your requirement.
5. Save the Rule & Test.

Simulate Errors

During testing and development you often face a situation where you want to test your feature in case of API Error, simulating some errors can be tricky on backends. Modify Response rule can help you simulate any kind of response you want for an API. Here are the steps you can follow for the same:

1. Create a new Modify Response Rule.
2. Use your API hostname & path as source condition like – company.com/api/path
3. In the status code select the status codes like 4xx, 5xx, etc.
4. In Response Body, you can select from Static or Dynamic response body as per your requirement.
5. Save the Rule & Test.

Test Local API Changes on the Prod Frontend

While development it’s a common requirement to keep the APIs back-compatible. In scenarios where backend developers have to make minor changes to the response body, the only way is to check the front-end code. With the Modify Response rule, you can easily modify the response of a production API to the new response and see if the production front-end can handle it. Here are the steps you can follow for the same:

1. Open the devtool(Inspect) of your browser.
2. Select the Requestly tab.
3. Search the API call you want to modify using search & filter options.
4. In the API details pane select the Response tab.
5. Click the “Edit Response Body” button to open the request in the new Modify Response rule panel.
6. Make the required modifications in the response body, status code & source condition.
7. Save the rule & Test.

GraphQL API Changes

GraphQL generally works with operations passed as a request body instead of using a different path for each resource on the server. Debugging tools created for REST APIs cannot generally target GraphQL APIs. Requestly comes with exclusive support for GraphQL APIs. In scenarios where you want to mock a change in the model of a GraphQL API, you can modify the response of that API by using an operations filter. Below are the steps to follow:

1. Create a new Modify Response Rule.
2. Select the Resource Type as GraphQL API.
3. Use your API hostname & path as source conditions like – company.com/api/graphql
4. With GraphQL another filter is enabled which can help further identify the Query like Operation Name, Query, and use these to filter queries.
5. In the status code use select the status codes like 4xx, 5xx, etc.
6. In Response Body, you can select from Static or Dynamic response body as per your requirement.
7. Save the Rule & Test.

Enhancing Efficiency with Async/Await

In scenarios where lengthy API calls or the need to manage multiple requests simultaneously arise, utilizing asynchronous programming techniques like Async/Await can significantly improve efficiency. Here’s how you can enhance efficiency using Async/Await:

1. Create a new Modify Response Rule.
2. Select the Resource Type as Rest API.
3. Use your API hostname & path as a source condition like – company.com/api/path .
4. In Response Body, select Dynamic response body and use Fetch with async await to request another API.
5. Save the Rule & Test.

Serve Without Server

In situations where you need to modify responses without triggering server requests, employing client-side techniques can provide a solution. This approach allows you to make alterations locally, enhancing user experience without engaging the server directly. Here’s how you can serve responses without server involvement:

1. Create a new Modify Response Rule.
2. Select the Resource Type as Static API.
3. Use your API hostname & path as a source condition like – company.com/static/api/path .
4. In Response Body, select Static response body
5. Click Serve this response body without making a call to the server
6. Save the Rule & Test

Step-by-Step Guide

Let’s see how modify response rule works:

1. Go to the HTTP Rules panel from the left side menu of the Requestly app.
2. Click on the ‘New Rule’ button to open a list of available rules.
3. Select the ‘Modify Response’ from the list of rules to open a detailed screen with more info about the Modify Response rule. Click  Create Rule  button on the top right.
4. Select the Type of Response:
   1. REST API to modify XHR/Fetch requests from web pages.
   2. GraphQL to Target & Modify GraphQL APIs using operations.
   3. HTML/JS/CSS(Desktop app only) – To work with HTML/JS/CSS files.
5. Enter the source condition where you want to apply this rule e.g. yourcompany.com
6. GraphQL Operation(only in the case of GraphQL) – Enables matching the operation you want to modify.
7. Select a Response Code as per the requirement like 200 for Success Response, 500-Internal Server Error, 400-Bad Request, 401-Unauthorized, etc.
8. Response Body – Based on how you want to create the response body 3 options are available:
   1. Static Response – Any text written in the response box will replace the original response of the Request.
   2. Dynamic Response – A programmatic response can be generated using different components from the request or the response.
   3. Local File(Desktop App Only) – To serve a local file if the Response Type is selected as HTML/JS/CSS.
9. Use the Test this rule window that appears after saving the rule to validate its functionality.

📎 NOTE: Modified Response’s Status Code & Body are not visible in the browser’s network window, due to the limitations of browsers.

Troubleshooting

There are some cases where rules might not work as expected, visit our troubleshooting guide for more details.