How to fake your API for TODO list

#angular #node #react #webdev

In the previous post, I discussed the necessity of having a REST API mocking tool for front-end and back-end developers as a simple layer which gives understanding about communication Interfaces for both.

Here is an example of how to create simple mocks for a TODO list application with https://fake.rest

Let's imagine we have a ready TODO list SPA application but the back-end is not available.
And for example we need to implement work with following methods:

Add Task
Delete Task
Update Task
Get task list

After login lets create our first endpoint mock:

In the "Response body" let's add the following template and Save it.

After endpoint created we can test it in any HTTP client tool.
I chose Insomnia.
And got:

For simplicity methods task/delete and task/update will use the same template for the response, so I just copied it from the task/add method

Next what we need to is generate the list of the tasks:

And let's generate an array of tasks from 5 to 10:

Check again in the Insomnia:

Looks like it works.

You can try it your own with the following URLs:

POST https://api.fake.rest/189bf93b-4d78-4f00-86ac-76d87cfccbd1/task/add
POST https://api.fake.rest/189bf93b-4d78-4f00-86ac-76d87cfccbd1/task/update
POST https://api.fake.rest/189bf93b-4d78-4f00-86ac-76d87cfccbd1/task/delete
GET https://api.fake.rest/189bf93b-4d78-4f00-86ac-76d87cfccbd1/task/list

How to use it in code

In my front end projects, I often use the axios.

With axios snippet might be:

import axios from 'axios';

const ax = axios.create({
  baseURL: 'https://api.fake.rest/189bf93b-4d78-4f00-86ac-76d87cfccbd1/',
});

const sendTask = (url, task) =>
  ax
    .post(url, task)
    .then(res => res.data)
    .catch(err => {
      throw err;
    });


export const fetchTaskList = () =>
  ax
    .get(`task/list`)
    .then(res => res.data)
    .catch(err => {
      throw err;
    });


export const addTask = task =>
  sendTask(`task/add`, task);

export const updateTask = task =>
  sendTask(`task/update`, task);

export const deleteTask = task =>
  sendTask(`task/delete`, task);