smart-fetch

Based heavily on this blog post by Kent C. Dodds; smart-fetch is a wrapper for isomorphic-fetch that adds a few features to make it do the smart thing by default, and a bit more.

All changes here are non-destructively added onto the existing native Fetch api. The 1st argument is the URL (or resource that should be appended to the base url, if using the micro-client generated by the wrapper); and the second argument is your fetch options.

Likewise, the wrapper takes the base url as its 1st argument, and options to use as defaults for all requests as the 2nd argument.

All current and future native fetch options are supported because they pass through smart-fetch into the same position of a native fetch usage.

Improvements from Kent

• Everything is overridable, but...
• A request body implies that the method should be POST
• Rejects if !response.ok - response body still sent as the rejection object
• API-friendly default Content-Type: application/json
• A wrapper function that allows you to create api micro-clients with a base url and default configuration, removing as much boilerplate as possible from individual requests.

I did not incorporate Kent's suggestion to bake in Bearer token headers using a localStorage key, but you could set that using the included wrapper function.

Improvements from me

• Request timeout support using AbortController. In the event of a timeout, smart-fetch will reject and the rejection error will have type request-timeout. By default there is no timeout.
• Assumes the response will be JSON, but if it fails to parse then you can still get it as plain text. I've always hated that response.text() fails if you've already tried response.json()!
• Use debug to offer efficient async optional debug output of requests made. Use env var DEBUG=smart-fetch to see the debug output.

Install

npm install @atuttle/smart-fetch

Usage

const { fetch } = require('@atuttle/smart-fetch');

const data = await fetch('https://api.example.com/foo/bar', {
	timeout: 5000, //ms
	headers: {
		apikey: 'keyboard-cat'
	}
});

Because there is no request body, the request method will be GET. If the api responds with JSON, you get the parsed JSON object back, else you get the response body back as plain text.

const { wrapFetch } = require('@atuttle/smart-fetch');

const myApi = wrapFetch('https://api.example.com', {
	timeout: 10000, //ms
	headers: {
		apikey: 'keyboard-cat'
	}
});
const data = await myApi('/foo/bar', { timeout: 5000 });

Here we've created a simple api client for an api at api.example.com, that will include an apikey header and use a 10 second timeout for every request... unless you override them at the time of the request. The request that follows overrides the timeout to 5 seconds, but still inherits the default apikey.

License

isomorphic-fetch, which does the majority of the work, is released under the MIT License. Likewise, smart-fetch is open source under the MIT License. See the LICENSE file for details.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!