vetch's Introduction

vetch

Simple fetch-wrapper

Install

yarn add vetch

Setup

For nodejs, please install node-fetch package then call function setVetch in main or index file.

import { setVetch } from 'vetch';
import fetch from 'node-fetch';

setVetch({ fetch });

For browser, please install whatwg-fetch then import that package in main or index file.

import 'whatwg-fetch';

Perks

Browser and node compatible
Built-in typings. Please add dom in compilerOptions.lib in your tsconfig.json
What you can do on fetch, you can do on vetch too.
Zero dependencies

Request

vetch(url: string, options?: Options)

Options

All fetch optional fields plus additional fields below.

field	type
query	Object
payload	options.body + Object

Chained Methods

Some methods for response.body:

text()
json()
blob() *
arrayBuffer() *
formData() *

You can chain those methods after vetch() function. See usage examples below for details.

(*) Some methods are not available on certain fetch versions

Response

Same as Fetch response with additional field called data which contains parsed data of the response body if vetch will be called alongside with one of the chained methods above.

Usage Examples

interface ResData {
  name: string;
}

const { data, headers } = await vetch<ResData[]>('/users').json();
// note: data is json parsed response body
// data has type ResData[]

// support object for request.query
const { data, headers } = await vetch<ResData[]>('/users', {
  query: {
    ids: [ 1, 2 ],
    city: 'auckland'
  }
}).json();
// note: for url /users?ids[]=1&ids[]=2&city=auckland
// data has type ResData[]

// support object for request.body
const { data, headers } = await vetch<ResData>('/users', {
  method: 'POST',
  payload: { name: 'John'}
}).json();
// fetch.option.body: JSON.stringify({ name: 'John' }) equivalent
// data has type ResData

// If you don't need to parse response body
const response = await vetch('/users');