How to fake your API for TODO list

Nikolay — Wed, 17 Jul 2019 23:24:10 +0000

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

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.

Does front end developer need a mock API Service?

Nikolay — Fri, 05 Apr 2019 20:28:00 +0000

Hello.
My name is Nikolay.
I am a front web developer. I am currently participating in a small enterprise project.
There are two of us. Front end developer and Back end developer.

The thing is that sometimes we are working asynchronously, I mean, one day when I need to use some REST API it's not ready. Another day its done but contains not enough data and it will take some days to change it according to new requirements. On my practice that situation where several times in some projects.

The first solution came up to me, is to generate fake data on the client and simulate request to the server. The advantage of this is that it's up to you and you don't need anyone to fix this. The disadvantage is your project build contains the code with fake data and fake data generators go to your build to. And sometimes it's big.

As the second solution, I was looking for online mock API services. I found a few but no one did not match my requirements.

Wasn't thinking too long, I decided to create my own mock API service.

And of course with my tricky requirements:

Dynamic response generation via Mustache or another template engine,
Url matching support. For example: /getClient/:clientId
Custom media library. To provide links to real data files or images you want.
Work with teams on projects.
Request History

What do you thinking of that guys?
Is this all make sense or I am fighting with windmills?

P.S.
If you are interested in my service please take a look on the prototype on https://fake.rest

DEV Community: Nikolay

How to fake your API for TODO list

How to use it in code

Does front end developer need a mock API Service?