README
mofetch
An isomorphic fetch utility with first class support for mocking API responses.
Usage
// configure it once
import { init } from 'mofetch';
const mocker = init({
baseUrl: 'http://localhost:3000',
mockFetch: true,
});
mocker.get('/api/users', function handler() {
return {
status: 200,
data: [{
id: 1,
name: 'Mocked User 1',
}],
};
});
// use the fetch util in any file
import { fetch } from 'mofetch';
const res = await fetch('/api/users');
const users = await res.json(); // array of users
How you benefit
- Instead of waiting on the backend APIs to be ready mock the unfinished APIs and continue building the frontend.
- If backend api doesn't work locally mock the API and implement basic logic to handle request response.
- Write better integration tests by mocking fetch calls.
- Run frontend apps on platforms like CodeSandbox without any need for API.
- Simulate race-conditions by changing response delay of individual APIs.
Installation Instructions
- Install
mofetch
and it's peer dependencynode-fetch
.
npm install node-fetch mofetch
- You can copy the basic configuration from any of the examples.
Note- You need to provide baseUrl
because node-fetch
uses absolute urls so we'll call http://localhost:3000/api/todos
if you set baseUrl
to http://localhost:3000
.
How it works
mofetch
is by default an isomorphic fetch library so you can use it on server and browser both. But when you enable mockFetch: true
the fetch function will first check if the url is assigned a mock handler. Based on the handler fetch
function returns the data.
Note- If there is no match for API in the mock, fetch
will fallback to calling the real API.
More usecases.
In-Memory DB.
- If a POST call adds an item to an array, you can simulate the same by making an in-memory array. Each API mutates the array and returns the mutated array.
API response delay
- By default a delay of
400ms
is put in API response in development mode (0ms in tests). You can increase the delay by either globally setting the delay.
init({
// other options,
delay: 800,
});
or setting it per API mock.
mocker.get(
'/api/todos',
{
status: 200,
data: todos,
},
{
delay: 1000,
},
);