Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ambar/create-fetch
myFetch = fetch |> query() |> headers() |> xsrf() |> ...
https://github.com/ambar/create-fetch
compose fetch http http-client middleware request
Last synced: 3 months ago
JSON representation
myFetch = fetch |> query() |> headers() |> xsrf() |> ...
- Host: GitHub
- URL: https://github.com/ambar/create-fetch
- Owner: ambar
- Created: 2018-07-30T16:40:17.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T04:04:43.000Z (about 2 years ago)
- Last Synced: 2024-10-04T22:06:36.627Z (4 months ago)
- Topics: compose, fetch, http, http-client, middleware, request
- Language: TypeScript
- Homepage:
- Size: 528 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# create-fetch
Utilities for custom [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
[](https://coveralls.io/github/ambar/create-fetch?branch=master)
[](https://www.npmjs.com/package/create-fetch)
[](https://bundlephobia.com/result?p=create-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"}
```
### Typing
```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,
})
```
### ESM
Import from [`module`](https://caniuse.com/#search=modules) script (1.4K gzip size):
```html
import createFetch, {query, headers} from 'https://unpkg.com/create-fetch'
const myFetch = createFetch(fetch, [
query(),
headers({'x-requested-with': 'fetch'}),
])
myFetch('/api', {query: {foo: 'bar'}})
```
## API
- [`defaults(options)`](#defaults)
- [`baseUrl(url)`](#baseUrl)
- [`headers(options)`](#headers)
- [`query()`](#query)
- [`bodify()`](#bodify)
- [`xsrf(options)`](#xsrf)
Add default request options.
```js
import {defaults} from 'create-fetch'
const myFetch = defaults({
credentials: 'same-origin',
})(fetch)
myFetch('/')
```
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
```
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
```
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
```
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
```
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:
```