When developing full-stack applications, a significant chunk of the frontend work relies on real-time data from the backend.
This can mean that you must hold off on developing the user interface until the API is available for use. However, waiting for the API to be ready to set up the frontend can considerably reduce productivity and extend project timelines.
A great workaround to this challenge involves utilizing mock APIs. These APIs allow you to develop and test your frontend using data that mimics the structure of the real data, all without relying on the actual API.
Getting Started With Mirage.js Mock APIs
Mirage.jsis a JavaScript library that lets you create mock APIs, complete with a test server running on the client side of your web application. This means you can test your frontend code without needing to worry about the availability or behavior of your real backend API.
To use Mirage.js, you first need to create mock API endpoints and define the responses that they should return. Then, Mirage.js intercepts all HTTP requests that your frontend code makes and returns the mock responses instead.
Once your API is ready, you can easily switch to using it by only changing the configuration of Mirage.js.
You can find this project’s source code in thisGitHubrepository.
Create a Mock API Server With Mirage.js
To demonstrate how to set up mock APIs, you’ll build a simple to-do React app that uses a Mirage.js backend. But first,create a React application using the create-react-app command. Alternatively, you’re able to useVite to set up a React project. Next, install Mirage.js dependency.
Now, to create a Mirage.js server instance to intercept requests and mock API responses, use thecreateServermethod. This method takes a configuration object as a parameter.
This object includes theenvironmentandnamespacefor the API. The environment specifies the stage of development that the API is at such as development while the namespace is the prefix added to all API endpoints.
Create a newsrc/server.jsfile and include the following code:
If needed, you can customize the namespace to match the URL structure of your actual API, including specifying the version. This way, once your API is ready, you can easily integrate it into your front-end application with minimal code changes.
In addition, within the server instance configuration, you’re able to also define a data model to simulate data storage and retrieval in the mock environment.
Finally, start the Mirage.js server by importing the server object in yourindex.jsxormain.jsxfile as follows:
Add Seed Data to the Mock API
Mirage.js has an in-memory database that you’re able to use to prepopulate the mock API with initial seed data and to manage test data from your client application. This means you can store and fetch the test data from the mock database and use it in your client application.
To add seed data to the Mock API, add the following code in theserver.jsfile right below themodelsobject.
Theseedsfunction populates a Mirage.js server with three to-do items, each with a title and description. Optionally, instead of hard coding the test data, you can integrate a library such asFaker.jsto generate the required test data.
Define the Mock API Routes
Now, define some API routes for the mock API. In this case, specify routes to handle GET, POST, and DELETE mock API requests.
Right below the seed data, add the code below:
Build a React Client
Now that the mock API is set up, let’s build a React client to interact with and consume the API endpoints. You are free to use any UI component library you like, but this guide will use Chakra UI to style the app.
First, install these dependencies:
Next, create a newsrc/components/TodoList.jsxfile, and include the following code:
Now, define a functional component to render the to-do list user interface, including the input fields for adding new tasks and a list of existing tasks.
Now, define the handler functions for the add and delete operations. But first, add these states. Alternatively, you canuse the useReducer hook to define the state management logicfor the to-do list app.
Now, define the logic to retrieve and display the seed data in the in-memory database when the application first loads in the browser by wrapping thefetchmethod in auseEffecthook.
TherenderKeystate is also included in the useEffect to ensure that the code triggers a re-render of newly added data in the in-memory database when the server is running.
Simply put, whenever a user adds new to-do data to the Mirage.js database—the component will re-render to display the updated data.
Adding Data to the API
Now, define the logic for adding data to the API through POST requests. Right below the useEffect hook, include the following code.
When a user enters data in the to-do input field and clicks theAdd Todobutton, the code updates thenewTodostate with the user’s input. Then, it sends a mock POST request to the API with the new data object in the request body to save it to the in-memory database.
If the POST request is successful, the code adds the new item to thetodosarray, and finally, triggers the component re-render to show the new to-do item.
Mock API DELETE Requests
Now, define the logic for deleting data through DELETE mock API requests. This process involves sending a DELETE request to remove the to-do item from the in-memory database. If successful, update both thetodosandloadingstate to reflect the deletion process.
Keep in mind that this process can only delete newly added data, not the seed data.
Finally, import theTodoListcomponent in theApp.jsxfile to render it in the DOM.
Great! Once you start the development server, you can fetch the seed data, and add and delete new data from the mock API in your React app.
Using Mock APIs to Speed Up Development
Mocking APIs is a great way to accelerate frontend development, whether you are working on a project individually or as part of a team. By using Mock APIs, you can quickly build the UI and test their code without waiting for the backend to be complete.
