Building a frontend app can be a pain when the backend isn’t ready.
Waiting around for APIs, dealing with missing data or relying on the backend team can really slow you down. That's where an API Mocking tool comes in handy, letting you quickly stub & override API responses.
Today, we will explore how you can quickly mock the APIs using Requestly. We will also see how we will mock a complete flow using live examples of MakeMyTrip (Rest APIs) and Agoda (graphQL APIs).
Let's jump in.
In a nutshell, we are covering these topics in detail.
- What are the usual problems with using an in-house mock server?
- How to set up API Mocks using Requestly (The most easiest way).
Requestly is an open source tool to support the developer ecosystem, please star the repo to show support.
1. What are the usual problems with using an in-house mock server?
In many development teams, waiting for backend APIs can really slow things down. When backend developers are still working on their part, frontend developers often find themselves stuck.
To get around this, they usually decide to set up a mock server, but it’s not as straightforward as it sounds:
⚡ First, they need to sit down with the backend team to figure out the API contracts. These contracts outline how the frontend will communicate with the backend, detailing what requests and responses to expect.
⚡ Once they have that information, frontend developers start looking for a mock server framework. This can take time as they compare different options and discuss what might work best for their needs.
⚡ After choosing a framework, they dive into configuring the mock server. This means installing software and setting it up to mimic the real API.
⚡ Next, they create mock responses for each endpoint based on the API contracts. This step is crucial because it allows them to simulate how their application will behave without waiting for the actual backend to be ready.
⚡ Once everything is set up, testing comes next. Developers run various scenarios to make sure that the mock server responds correctly.
⚡ Finally, there’s maintenance. As the real API evolves, developers have to keep updating the mock server to stay in sync.
While this traditional approach helps in some ways, it can be very time-consuming. Tools like Requestly can help you to create mock APIs easily, letting you focus on building great features without getting stuck waiting for backend work to finish.
2. How to set up API Mocks using Requestly.
Requestly is an open source API Interception & Mocking tool that helps you quickly create mocks for existing or non-existing API endpoints. It comes in the form of a Chrome extension for web developers and a desktop app for mobile & backend developers.
✅ Define mock responses for your API calls.
✅ Simulate different scenarios, such as errors or timeouts.
✅ Run tests even when backend services are not ready.
You can also collaborate with other developers on the team and enable integration with CI/CD pipelines with cloud-based Mocks.
🎯 What is an API Mocking?
The term API Mocking is used when we simulate API responses for testing or development purposes. It involves creating predefined responses for existing or even non-existing API endpoints. This helps developers to simulate various scenarios such as successful responses, error codes or latency, without depending on a live API.
By mimicking the behavior of real APIs, teams test integrations, debug issues and prototype features in isolation. This is especially useful in an API-first approach, where having a complete API detailing endpoints and expected responses is crucial before development begins.
This increases the speed of the development cycle, as developers can work with predefined responses that match the expected behavior of the live API. Once the actual API is ready, developers can swap the mock endpoint which is a smooth transition from development to production.
There are different methods, types, mocking patterns and much more to it. If you're interested in reading more, Katalon's guide on What is API mocking is a great place to start.
🎯 How to install Requestly?
You can download the Requestly desktop app and sign up accordingly.
🎯 Connecting Requestly with Chrome
We need to intercept traffic which is only possible using Network traffic available in the desktop app.
I'm using Windows but you can download and follow the same on Linux, Apple Chip, Mac Intel Chip.
You will also need to install the Requestly browser extension. I prefer Chrome but there is also an option for Safari, Brave, Edge, Firefox, Opera and Vivaldi.
You can click on Connect button in the extension popup. Please note that it will only appear when the desktop app is open.
There are two options visible on the desktop interface but we are going to connect browser for the scope of this article:
✅ Connect apps: this will connect a specific app like a terminal, mobile apps such as Android and more. I'm going to use Chrome for this.
Once it's enabled, you will get a simple screen in the browser.
🎯 Flow for Mocking an API
Let's see the complete flow that is involved in mocking API, this same flow will be followed in the next section examples as well.
Once we connect the chrome browser to intercept traffic in requestly desktop client, search anything on the browser like google.
Go back to Requestly Network traffic and it will show all the traffic.
You can filter the requests as well based on the method used, status code or resource type.
All you need to do is right-click on any API endpoint you want to mock. You will need to select the option of Modify Response Body.
This is how the rule for that API endpoint will be shown.
✅ Explanation.
-→ Request: this will contain the main API endpoint URL that will be used along with options like contains and equal.
-→ Response status: This will be the status code sent with the response that will help you identify the log easily. You can select the status codes like 3xx, 4xx, 5xx and many more depending on your case.
-→ Response: We can use static response data or a dynamic request to add custom logic using code. In case of lengthy API calls or the need to manage multiple requests simultaneously, using Async/Await can be efficient.
Once you save the rule, you will get a confirmation message that shows you have successfully mocked that API. That's how easy it is with Requestly.
You can find that rule in the HTTP Rules tab in the sidebar, plus you can disable and enable the rules individually.
How can you validate that? Once you clear the log in network traffic and repeat the same process in the browser (to trigger the same API endpoint).
Check the network traffic in the desktop client and that Mock API endpoint will be shown in a different color.
You can make a group, share and export the rule as well.
Now let's see how we can mock an entire collection of APIs by capturing network traffic using live examples of MakeMyTrip (Rest APIs) and Agoda (graphQL APIs).
🎯 Mocking REST APIs (Makemytrip):
Let's take an example using the live APIs of Makemytrip.com.
Go to the website and search for Goa Hotels.
Once you go back to Requestly Network traffic in the Desktop Client, it will record all the traffic.
Now, you can filter the requests and save them in a session to work on them afterward.
You will get a message when the session is saved.
All the sessions will be available in the Sessions tab in the sidebar.
Once you click on the session, you will get the option of Create mocks from this session. You will get two options and we're trying out REST APIs in this example.
After that, you will have to select a matching rule based on your requirements. I'm selecting Match Only Path for this one so it's easier to track changes.
Once you finish it, the mock rules will have been created. You will get a success message and you can find it in the HTTP Rules sidebar tab.
You can disable and enable the rules individually. There are options under each rule that will help you customize the response that is fetched.
Let's keep the group rules active and see if it performs correctly.
Now, go back to Network Traffic and clear the log. Do the same process of searching Goa hotels on Makemytrip.com.
Check the network traffic in the Requestly client and the modified requests will be shown in a different color. There were all REST APIs so it's hard to find any that were not modified.
But you will understand it better once we complete the second example using GraphQL APIs.
This is how you can easily Mock REST APIs in bulk.
🎯 Mocking GraphQL APIs (Agoda):
In this example, we will be using live APIs of Agoda.com.
We will repeat the same process, so I won't be explaining that deeply since you will be able to understand how the flow works. It's very similar to the previous example.
Remember to clear the log in network traffic.
Go to the Agoda website and search for Goa Hotels.
Go back to network traffic in the Requestly dashboard.
You will have to put the key and value to filter specific requests.
After that, you will have to select a matching rule based on your requirements. I'm selecting Match Only Path for this one as well so it's easier to track changes.
Once you finish it, the mock rules will have been created. You will get a success message and you can find it in the HTTP Rules sidebar tab.
Now, go back to Network Traffic and clear the log. Do the same process of searching Goa hotels on Agoda.
Check the network traffic in the Requestly client and the modified requests will be shown in a different color.
You can filter all modified requests at once along with other useful options.
You can get each modified rule and find out more about them.
For instance, below is one of the modified rules with all the details.
You can also select the option to serve the request from the Requestly dashboard without making the call to the server.
That is the complete flow.
It's safe to say that Requestly can help you create Mocks in bulk very fast.
You can read more on the docs on how to create a Mock API and how to record APIs in bulk.
Here is a quick 5-mins overview of different API Mocking, Development & Testing capabilities of Requestly!
Requestly is the best open source tool to mock APIs and speed up your development cycle.
Let me know if you've any questions or feedback in the comments.
Have a great day. Till next time!
| If you loved this, please follow for more :) Thank you for reading, Anmol 🥰 |
  
|
|---|
Follow Requestly for more content like this.
Top comments (5)
Beautiful!
Thanks for reading Dumebi :)
Sounds like an awesome tool for mocking APIs.
Does it has some built-in APIs like food APIs etc. that I can use for one of my test apps?
Requestly is cool! Though I prefer light mode 🐦🔥
Your articles on APIs are incredibly helpful. I want to share that in my own projects, EchoAPI has been invaluable for simulating RESTful endpoints, letting me thoroughly test requests and responses.