Author avatar

Kimaru Thagana

Creating a Mock API in React

Kimaru Thagana

  • Jul 12, 2020
  • 6 Min read
  • 86,985 Views
  • Jul 12, 2020
  • 6 Min read
  • 86,985 Views
Web Development
Front End Web Development
Client-side Framework
React
Introduction

Introduction

Often, frontend developers can be frustrated when development of a prototype is stalled due to lack of an actual API. This could be due to the backend team taking too much time to develop the endpoint the application is to consume.

In this guide, you will learn how to create your own mock endpoints using a local JSON file.

This guide assumes that you have a basic understanding of APIs and at least beginner proficiency working with JSON files and Node.js. You should also be familiar with testing APIs using either CURL or Postman.

Suppose you are a budding frontend developer at a dev house in your local tech community. You need to develop a proof of concept (PoC) of a payroll system for a potential client. The client has requested to see a page with a list of employees fetched from an API. To accelerate development, you decide to develop a mock API.

Mock API Design

The mock API endpoint could be /employees and the properties for each employee will consist of:

  1. id - A number that uniquely identifies the employee
  2. first_name - The first name of the employee
  3. last_name - The last name of the employee
  4. email - The email address of the employee
  5. gender - The gender of the employee
  6. status - The status of the employee

Setup

To create the mock API, you are going to use a tool called JSON server. The tool is designed to help developers spin up REST APIs with CRUD functionalities very quickly.

You can start by setting up your Node.js project. Create a directory called json-mock-api.

1mkdir json-mock-api
bash

Navigate to your project's root directory. 

1cd json-mock-api
bash

Create a package.json file. The file is used to define the project's metadata, from the name of the project to the dependencies to commands to run tests and start the project. Below is a sample. Copy its contents and paste it into your package.json file:

1{
2  "name": "json-mock-api",
3  "version": "1.0.0",
4  "description": "A simple JSON mock API",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC"
11}
json

You can then proceed to add the dependency needed to create the mock API, json-server. This can be done by running the following command on the project's root directory.

1npm install json-server --save
bash

Creating the Mock API

Your mock API will need a source for its data. Create an src folder, and then within it, create a db.json file. Your file structure should look something like this:

1json-mock-api/    
2    node_modules/
3    src/   
4    	db.json
5    package.json

The db.json file will act as your data source. There, you will define what data you want to retrieve from your mock API. This is where you define the sample employees and their various details as outlined earlier in the design. The first property, employees, on the JSON file is used to define the name of the endpoint. . 

1{
2  "employees": [
3    {
4      "id": 1,
5      "first_name": "John",
6      "last_name": "Doe",
7      "email": "[email protected]",
8      "gender": "Male",
9      "status": "Terminated"
10    },
11    {
12      "id": 2,
13      "first_name": "Jane",
14      "last_name": "Doe",
15      "email": "[email protected]",
16      "gender": "Female",
17      "status": "New"
18    },
19    {
20      "id": 3,
21      "first_name": "Alice",
22      "last_name": "Doe",
23      "email": "[email protected]",
24      "gender": "Female",
25      "status": "Leaving"
26    },
27    {
28      "id": 4,
29      "first_name": "Bob",
30      "last_name": "Doe",
31      "email": "[email protected]",
32       "gender": "Male",
33      "status": "Active"
34    }
35  ]
36}
json

To start up your API, run the command below in your terminal:

1json-server --watch src/db.json
bash

You should see your API running with an endpoint, http:/localhost:3000/employees:

Testing the Mock API

Go ahead and test your newly created endpoint on any API testing tool, such as Postman or CURL.

To make a GET request for all employees, run the command below.

1curl http://localhost:3000/employees
bash

The response should be as below. Note that it is an array with all the employees.

1[
2  {
3    "id": 1,
4    "first_name": "John",
5    "last_name": "Doe",
6    "email": "[email protected]",
7    "gender": "Male",
8    "status": "Terminated"
9  },
10  {
11    "id": 2,
12    "first_name": "Jane",
13    "last_name": "Doe",
14    "email": "[email protected]",
15    "gender": "Female",
16    "status": "Retired"
17  },
18  {
19    "id": 3,
20    "first_name": "Alice",
21    "last_name": "Doe",
22    "email": "[email protected]",
23    "gender": "Female",
24    "status": "Suspended"
25  },
26  {
27    "id": 4,
28    "first_name": "Bob",
29    "last_name": "Doe",
30    "email": "[email protected]",
31     "gender": "Male",
32    "status": "Active"
33  }
34]
json

To make a GET request for a specific employee, append the id of the employee to the endpoint /employees/4. You can then run the command below.

1curl http://localhost:3000/employees/4
bash

The response should be as below. Note that it is an object with the specific employee details of the employee whose id is 4.

1{
2  "id": 4,
3  "first_name": "Bob",
4  "last_name": "Doe",
5  "email": "[email protected]",
6  "gender": "Male",
7  "status": "Active"
8}
json

Conclusion

You have now learned how to create mock API or web service endpoints using json-server.

In the job market, this skill is in high demand in job roles such as React developer, Node.js developer, API Developer, and frontend engineer.

This guide, covered only GET requests. To further develop your skills and add to what you have learnedf in this guide, you can also learn how to use the json-server tool to develop endpoints with other methods like POST, PATCH, and DELETE. In addition, you can also add filtering and pagination to your endpoints.

To learn more about the tool, have a look at the JSON Server Documentation.

LEARN MORE