rmariuzzo / fotch

Fotch – In browser fake REST API for creative development purposes!

Motivation

When I code for fun, I occasionally need a backend REST API to play with. Usually, I feel too lazy to create a dumb REST API. I have dream about a simple library that I could plug in the frontend with little effort and simulate and persist data somewhere. Then fotch was born.

How it works?

fotch monkey patches the window.fetch API and intercept all calls. When a matching call looks like a REST operation then fotch responds as you would expect from a REST API. All data is stored in window.localStorage.

Installation

npm i fotch

Usage

import fotch from 'fotch'

fotch.start()

That's it! Seriously, just start using the fetch API as if there's a REST API. You can stop intercepting calls using fotch.stop().

▶︎ View demo on CodeSandbox

Examples

// Get a list of apples.
fetch('/apples')

// Get an apple by id.
fetch('/apples/1')

// Create an apple.
fetch('/apples', { method: 'post', data: JSON.stringify({ color: 'red' }) })

// Update an apple.
fetch('/apples/1', { method: 'put', data: JSON.stringify({ color: 'green' }) })

// Remove an apple.
fetch('/apples/1', { method: 'delete' })

Documentation

The first parameter can be a string or a configuration object.

When the first parameter is a string it will be interpreted as match pattern.

fotch.start('/api/')

This will filter any fetch calls where the URL contains /api/.

Configuration object

When the first parameter is a configuration object the following options can be used:

Name	Type	Description
match	string	The portion to match in a URL to filter fetch calls.
delay	number	Specify a delay to all calls in milliseconds .
	{ min, max }	Specify a minimum and a maximum delay to all calls in milliseconds. fotch will return a random delay within that range.

If you need more options then request it creating an issue.

Development

1. Clone this repository.
2. Install dependencies: npm i.
3. Make changes and create a PR.

Tests

npm run test

Releases

Releases are triggered by npm version and handled by GitHub Actions.

---

Made with ♥ by @rmariuzzo and contributors.

fotch's Issues

Simulate the "waiting for response" behavior

Hi @rmariuzzo

Hope you doing well. This repo looks quite handy to me for testing components that request server data (even when such server/endpoint doesn't exist yet).

Have you considered adding a fake time of waiting for the response? If so, let me know, and I make a proposal right here and afterward a pull-request.