Try it out on CodeSandbox
An isomorphic fetch utility with first class support for mocking API responses.
// 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
mofetch
and it's peer dependency node-fetch
.npm install node-fetch mofetch
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
.
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.
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,
},
);