axios-fetch

Axios-Fetch

This library exposes a Fetch WebAPI implementation backed by an Axios client instance. This allows a bridge between projects that have pre-configured Axios clients already to other libraries that require Fetch implementations.

Global Response object

It is expected that the global Response object will be available. For testing we use the node-fetch library.

import { Response } from 'node-fetch';
// @ts-expect-error node-fetch doesn't exactly match the Response object, but close enough.
global.Response = Response;

Example

One library that wants a Fetch implementation is the Apollo Link HTTP library. If your project has an existing Axios client configured, then this project can help you use that client in your apollo-link-http instance. Here is some sample code:

const { buildAxiosFetch } = require("@lifeomic/axios-fetch");
const { createHttpLink } = require("apollo-link-http");
const link = createHttpLink({
  uri: "/graphql",
  fetch: buildAxiosFetch(yourAxiosInstance)
});

Transforming requests

It is possible to transform requests before they reach your Axios client by providing an optional argument to buildAxiosFetch. For example, if you wanted a fetch implementation that always set the request timeout to 1 second, you could use code like:

const { buildAxiosFetch } = require("@lifeomic/axios-fetch");
const fetch = buildAxiosFetch(yourAxiosInstance, function (config) {
  config.timeout = 1000;
  return config;
});

Support for IE11

To Support IE11 add following dependencies

 npm install --save isomorphic-fetch
 npm install --save es6-promise

After adding these dependencies import in index.jsx file at top (Need to import before React)

import * as es6Promise from 'es6-promise';
import 'isomorphic-fetch';

es6Promise.polyfill(); // below all import end