create-fetch

Utilities for custom fetch.


Install

``console
npm install create-fetch
`

Usage

`js
import 'cross-fetch/polyfill' // add universal-fetch polyfill if needed
import {composeFetch, query, headers, bodify} from 'create-fetch'

const myFetch = composeFetch([
query(),
bodify(),
headers({'x-requested-with': 'fetch'}),
])(fetch)

// same as:
// const myFetch = compose(query(), ...)(fetch)

// could also use pipeline operator:
// const myFetch = fetch |> query() |> ...

myFetch('/api', {
method: 'POST',
query: {filter: 'user'},
body: {name: 'JoJo'},
})
// =>
// POST /api?filter=user
// Request Headers:
// content-type: application/json
// x-requested-with: fetch
// Request Payload:
// {"name":"JoJo"}
`

$3

`ts
import {FetchCompose, FetchEnhancer, query, bodify} from 'create-fetch'
import flowRight from 'lodash/flowRight'

// inject extra options
type FooInit = {foo?: boolean}
const foo =
(): FetchEnhancer =>
(fetch) =>
(url, {foo, ...options}) => {
if (foo) {
// ...
}
return fetch(url, options)
}

const bar = (): FetchEnhancer => (fetch) => (url, options) => {
return fetch(url, options)
}

// same as composeFetch
const myFetch = (flowRight as FetchCompose)([
//
foo(),
bar(),
query(),
bodify(),
])(fetch)

// (url: RequestInfo, options?: RequestInit & QueryInit & FooInit) => Promise
myFetch('/', {
withEncrypt: true,
})
`

$3

Import from module script (1.4K gzip size):

`html

`

API

- defaults(options)
- baseUrl(url)
- headers(options)
- query()
- bodify()
- xsrf(options)

$3

Add default request options.

`js
import {defaults} from 'create-fetch'

const myFetch = defaults({
credentials: 'same-origin',
})(fetch)
myFetch('/')
`

$3

Add request base url.

`js
import {baseUrl} from 'create-fetch'

const ghApi = baseUrl('https://api.github.com')(fetch)
ghApi('/users')
// =>
// GET https://api.github.com/users
`

$3

Add default request headers.

`js
import {headers} from 'create-fetch'

const myFetch = headers({
'x-requested-with': 'fetch',
// null or undefined will be removed
'x-foo': null,
})(fetch)

myFetch('/')
// =>
// GET /
// Request Headers:
// x-requested-with: fetch
`

$3

Stringify query string.

`js
import {query} from 'create-fetch'

const myFetch = query()(fetch)

myFetch('/', {
query: {
filter: 'user'
// null or undefined will be set to empty
foo: null
},
})
// =>
// GET /?filter=user&foo
`

$3

Stringify request body.

`js
import {bodify} from 'create-fetch'

const myFetch = bodify()(fetch)

// stringify json by default
myFetch('/', {
method: 'POST',
body: {name: 'JoJo'},
})
// =>
// POST /
// Request Headers:
// content-type: application/json
// Request Payload:
// {"name":"JoJo"}

// stringify form
myFetch('/', {
method: 'POST',
body: new URLSearchParams({name: 'JoJo'}),
})
// =>
// POST /
// Request Headers:
// content-type: application/x-www-form-urlencoded
// Request Payload:
// name=JoJo
`

$3

Add XSRF token header.

`js
import {xsrf} from 'create-fetch'

const myFetch = xsrf({
cookieName, // defaults to _xsrf
headerName, // defaults to x-xsrftoken
})(fetch)

myFetch('/', {
method: 'POST',
})
// =>
// POST /
// Request Headers:
// x-xsrftoken:
``