Simple and powerful fetch API extension. Use request and response interceptors to deal with API.

---

✅ Zero dependencies

✅ SSR support

✅ Uses Fetch API

✅ Request and response interceptors allows to easily customize connection with API

✅ TypeScript support

✅ Less than 2k minizipped

✅ Simple cache provider - easily to extend

---

fetching-library

Request and response interceptors allows you to easily customize connection with API (add authorization, refresh token, cache, etc). It uses Fetch API so it can be use in SSR apps (ie. with isomorphic-fetch)

Documentation

Full documentation is available at https://marcin-piela.github.io/fetching-library

Installation

Run the following from your project root :

npm install fetching-library

or

yarn add fetching-library

Short example of use with caching

import { createClient, cache, requestJsonInterceptor, responseJsonInterceptor, responseTextInterceptor } from 'fetching-library';
 
const cache = createCache(
  (action) => {
    return action.method === 'GET';
  },
  (response) => {
    return new Date().getTime() - response.timestamp < 100000;
  },
);
 
// Options is not required
const client = createClient({
  requestInterceptors: [requestJsonInterceptor],
  responseInterceptors: [responseJsonInterceptor, responseTextInterceptor]
  cacheProvider: cache,
});
 
const action = { 
  method: 'GET',
  endpoint: '/users',
};
 
client.query(action).then(response => {
  //response.status
  //response.error
  //response.errorObject
  //response.payload
});
 

Example of request interceptor

import { createClient, requestJsonInterceptor, responseJsonInterceptor } from 'fetching-library';
 
const requestHostInterceptor: host => client => async action => {
  return {
    ...action,
    endpoint: `${host}${action.endpoint}`,
  };
};
 
const client = createClient({
  requestInterceptors: [requestJsonInterceptor, requestHostInterceptor('http://example.com')],
  responseInterceptors: [responseJsonInterceptor]
  cacheProvider: cache,
});
 
const action = { 
  method: 'GET',
  endpoint: '/users',
};
 
client.query(action).then(response => {
  //response.status
  //response.error
  //response.errorObject
  //response.payload
});
 

Do you want to use it in react app?

Check react-fetching-library

Contributing

Fell free to open PRs and issues to make this library better !

When making a PR, make sure all tests pass. If you add a new feature, please consider updating the documentation or codesandbox examples. Thank you!

License

fetching-library is licensed under the MIT license.