Debug & Mock GraphQL APIs using Requestly

The use of GraphQL is getting popular day by day and is being adopted by companies worldwide. The need for debugging GraphQL APIs is also increasing. At Requestly, we aim to make front-end developers’ lives easy. We have already covered REST API debugging and have published many articles & tutorials. In this article, we will learn how Requestly helps you with debugging the front end with GraphQL APIs.

Table of Content

Requestly helps you in intercepting & modifying the APIs on the fly using HTTP Rules. You can apply these rules to any HTTP Request including GraphQL APIs. GraphQL APIs use a single endpoint for all the queries to the backend. REST APIs have different endpoints for different resources. So targeting specific queries in GraphQL needs a filter based on operation or query. Requestly enables you to filter the API calls based on operation or query. Let’s explore different scenarios where Requestly helps you debug GraphQL APIs.

Override GraphQL API Responses using Modify Response Rule

Frontend developers frequently need to test their code with variations in responses. To override the response you can use the Modify Response Rule. For example, assume you have a GraphQL query to fetch a list of articles for a blogging website like medium.com. You may need to modify the response of ListArticles GraphQL API to test features like displaying only two categories at a time, and handling large title lengths or small excepts. Follow the steps below to override the response of this API.

1. Start by creating a new Modify API Response Rule.
2. Select the Resource Type as GraphQL API.
3. Use your API’s hostname and path as source conditions like – company.com/api/graphql
4. GraphQL enables an additional filter to further identify queries by Operation Name or Query. In the Key field, enter the operation name’s path, such as 0.operationName . Choose Equals for exact matches or Contains for broader searches. Enter the operation name in the value field.
5. In the status code 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.

Override GraphQL APIs Request Body using Modify Request Rule

If you need to override the request body for a GraphQL API. For scenarios where you need to switch models or modify fields in a query, use the programmatic option in the request body rule to selectively modify GraphQL requests. Follow the below steps to override API Requests.

1. Create a new Modify Request Rule.
2. Use your API hostname & path as source conditions like – company.com/api/graphql
3. Under Request Body select Programmatic
4. We can filter and modify the request using the below code. Make sure you replace [modified query] with your query.
5. Save the rule and test.

function modifyRequestBody(args) {
const { method, url, body, bodyAsJson } = args;
if(bodyAsJson[0].operationName = 'ListArticles'){
bodyAsJson[0].query = '[modified query]'
}
return body;
}

Load Production GraphQL APIs on Local or Staging Frontends using Replace Rule

Setting up a local GraphQL server is challenging with multiple data sources and models. You can eliminate the extensive time and effort required to create and update your local environment with Requestly’s Replace Rule. You can also use production APIs on the staging front end to use more stable APIs. Follow the below steps to load production APIs on local or staging environments.

1. Create a new Replace Rule.
2. Use your local or staging API hostname & path as source conditions like – company.com/api/graphql
3. Under Redirect to select
   1. URL and enter the Production URL in the field given below.
   2. Mock Server and select a Mock API if you want to load mock API responses.
4. Save and test the rule.

Load Local or Staging GraphQL APIs on Production Frontends using Replace Rule

As a backend developer, your work constantly focuses on enhancing and expanding GraphQL APIs. After making changes, it’s essential to verify them with the frontend. However, deploying the frontend locally is challenging due to its complexities and dependencies. You can save significant time and effort in setting up your local frontend environment with Requestly’s Replace Rule. Additionally, staging APIs can be utilized on the production frontend for testing. Follow the below steps to use the Replace rule.

1. Create a new Replace Rule.
2. Use your production API hostname & path as source conditions like – company.com/api/graphql
3. Under “Redirect to” select the URL and enter the local or staging URL in the field given below.
4. Save and test the rule.

Mock GraphQL APIs Responses using Redirect Rule and Mock Server

As a front-end developer, you often need to develop new features in parallel before the GraphQL APIs are ready. Hardcoding API responses is not a best practice as you will have to make sure that you clean your code before committing. Mocking the APIs is the best available option due to its nature of being isolated in Requestly. Requestly offers a Mock Server feature for creating API mocks, and its Redirect Rule allows you to reroute API calls to the mock server. So you have a Mock GraphQL API ready with just a few configurations in Requestly. Follow the steps below to create an API mock:

1. Create a New Mock API from the Mock Server of Requestly.
2. Give it a Descriptive Name, Method, Status Code, Path & Response body.
3. Click “Create” to create the mock server.
4. Now navigate to HTTP Rules and create a new Redirect Rule.
5. Use your API hostname & path as source conditions like – company.com/api/graphql
6. Under Redirect to select Mock Server and select a Mock API you created above.
7. Save and test the rule.