Fotch NPM | npm.io

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.