@awesome-it/axios-offline

Remembering failed requests and repeating when an internet connection is available

Credentials

This package is based on a work of appello and jonkofee.

Installation

Using npm

npm install axios localforage # install peer dependencies
npm install @awesome-it/axios-offline

Using yarn

yarn add axios localforage # install peer dependencies
yarn add @awesome-it/axios-offline

Usage example

import { AxiosOffline } from '@awesome-it/axios-offline';
import axios, { AxiosAdapter, HttpStatusCode } from 'axios';
import LocalForage from 'localforage';

const offlineUrls = ['/list', '/profile'];

export const axiosOfflineInstance = new AxiosOffline({
  axiosInstance: axios,
  storageInstance: LocalForage.createInstance({
    name: 'axios-offline',
    driver: LocalForage.LOCALSTORAGE,
  }),
  // Note that some request props as transformRequest and transformResponse are not supported since they can't get hydrated.
  getRequestToStore: ({ baseURL, method, url, headers, data }) =>
    method && ['post', 'put', 'patch', 'delete'].includes(method) ? { baseURL, method, url, headers, data } : undefined,
  getResponsePlaceholder: config => ({
    config,
    headers: {},
    data: undefined,
    status: HttpStatusCode.Ok,
    statusText: 'Request successfully stored till back online!',
  }),
});

export const Api = axios.create({
  adapter: axiosOfflineInstance.adapter,
});

window.addEventListener('online', (event) => {
  try {
    axiosOfflineInstance.sendRequestsFromStore();
  } catch (error) {
    console.error('Failed to send requests from store', error);
  }
});