How to fake your API for TODO list
Tags: angular, node, react, webdev
Published: 2019-07-17 23:24:10

---
title: How to fake your API for TODO list
published: true
description: How to create good API mocks with similar to real users data
tags: angular, node, react, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k1be7tgezvuu845615uf.png
---

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:
![](https://thepracticaldev.s3.amazonaws.com/i/8mooe9mxtdvsewja9upy.gif)

In the "Response body" let's add the following template and Save it.
![](https://thepracticaldev.s3.amazonaws.com/i/2b8wu3y0qbudkt8uqbdx.png)

After endpoint created we can test it in any HTTP client tool.
I chose [Insomnia](https://insomnia.rest/download/).
And got:
![](https://thepracticaldev.s3.amazonaws.com/i/tehve2mf1vegmucajk9p.png)

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:
![](https://thepracticaldev.s3.amazonaws.com/i/8s2dpbwc6zom4y5ms4us.gif)

And let's generate an array of tasks from 5 to 10:
![](https://thepracticaldev.s3.amazonaws.com/i/v6ifhh1dgr7whbwypsze.png)

Check again in the Insomnia:
![](https://thepracticaldev.s3.amazonaws.com/i/qmggof6yvl7utvbd0jnc.png)

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:
```javascript
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);


```

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.