DEV Community

Cover image for How to fake your API for TODO list
Nikolay
Nikolay

Posted on

How to fake your API for TODO list

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
Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

To work with real API when it's ready simply change the baseURL property.

This is my first introduction of Fake.REST I hope you like it and found it useful.

If you have suggestions about how to improve the service please write me in the comments.

Thank you.

Top comments (1)

Collapse
 
brymmobaggins profile image
Ibrahim Bakare

This is awesome.