Who is still using XMLHttpRequest these days? while Fetch supports promises which make API more simpler and cleaner. Using Fetch has been great for me but i saw some potential tweaks that makes my life easier while handling cross typescript applications. Therefore, i made this simple fetch wrapper with zero dependencies and less than 1KB, so it’s good for developer that have bundlephobia.

Here is some features of Vetch:

1. Built-in typings

I am such a typescript addict more than 2 years. After using typescript, i never go back to javascript ever since. So i decided to made Vetch with built-in typings as i don’t like idea having typings through @types/xxx.

2. Support query object

Fetch doesn’t support converting object to query string. Can imagine if you have query data below?

{
  limit: 10,
  offset: 15,
  cityIn: [ 'London', 'New York' ]
}

Then you need to convert it to

?limit=10&offset=15&cityIn[]=London&cityIn[]=New York

Vetch supports both query object and query string. For query object, you could easily add query field in options. See example below.

const { data, headers } = await vetch<City[]>('/addresses', {
  query: {
    ids: [ 1, 2 ],
    city: 'auckland'
  }
});

3. Object payload

This is only minor feature. Often i forgot to pass my json payload as a string in body. Vetch has payload field in options. It is pretty much like body with json support. See example below.

const { data, headers } = await vetch<User>('/users', {
  method: 'POST',
  payload: { name: 'John'}
});

4. Make simple fetch simpler

Vetch has chained methods to parse your body response that you can call right after vetch function. while in fetch you need to call these functions separately.

// vetch
const { data } = await vetch<User>('/users', {
  method: 'POST',
  payload: { name: 'John'}
}).json();

// fetch
const res =  await fetch('/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John'})
});

const data = await res.json();