How Axios Mock API can Increase FE Web Development Effectively

Some of you may often wait for each other between Front End and Back End Developers when developing applications related to services. Basically FE waits for BE to release their API which will be used by FE to display or submit data.

So maybe FE will delay working on features related to the API because BE can’t release the API in the near future. Of course, it will make development on the Front End take longer because they are required to wait for the Back End Developer to complete the API.

However, this seems to be solved by using the Axios mock adapter. FE can create Mock services with the agreed API spec. So FE doesn’t have to wait for BE to finish its API first.

Step 1 : Define API Specs

To start making mock API’s, the first step that needs to be done is to get the API Spec that will be used later. in this case it will consist of response status, data returned and others

example of API Specs
endpoint : "localhost:3000/api/users"
get:
responses:
status: 200
data:[
  {'id' : 1, 'name' : 'Ahmad'},
  {'id' : 2, 'name' : 'Budi'},
  ...
  {'id' : 80, 'name' : 'Hadi'}
]

Then from the example above it can be concluded that the results when the get API will return data from users containing the name and id.

When we have received the API Spec from BE, the next step is to use the axios mock adapter to create the Mock version of the API’s.

Step 2: Create Mock API

At this stage FE will make a Mock API using axios, of course previously axios and axios-mock-adapter must have been installed.

npm i axios
npm i axios-mock-adapter

Usually in Front End projects, we will wrap the Service in the Services folder which will contain files related to the service. For example we will create api.js which will be in the services folder.

//at services/api.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
const api = axios create({
   baseURL = "http://localhost:3000"
})
const mock = new MockAdapter(api);
mock.onGet("/api/users").reply(200, {
 status:200
 data: [
  { id : 1, name : 'Ahmad'},
  { id : 2, name : 'Budi'},
  { id : 3, name : 'Yono'},
  { id : 4, name: 'Romlah'},
  { id: 4, name: 'Bambang'},
]);
export default api;

In the example above, we have created a mock API with a response of 200 and will return data from users with the names written above.

Step 3: Call the Mock API

At this stage we will make a call based on the end point that has been defined above.

//at app.js
import React, {useState, useEffect} from 'react';
import api from '../services/api;
function App(){
  const [users, setUsers] = useState("");
  // this function will hit the Mock API's EndPoints
  const getUsers = () => {
    api.get("/api/users")
    .then((response) => {
      const res = response;
      setData(res.data.users);
  })
    .catch(error => console.error());
  }
  // this is for call the function for hit the API's
  useEffect(() => {
    getUsers();
  },[]);
  return (
    <div>
      {users.map((user) => (
        <li key={user.id}> { user.name } </li>
       )}
    </div>
  );
}

Result:

result from mock api

Conclusion:

With this mock API, it is hoped that it will make it easier for Front End Developers to work on tasks related to API services, so that service-related features can be done in parallel with API work by Back End Developers. so that by working earlier, there will be more opportunities and time for FE Dev to deal with other problems such as bugs and errors.