react-axios-localstorage

react-axios-localstorage is a simple hook that wraps axios and automatically serializes and caches the results in browser localstorage. This package is not designed to be used on the server, but the main functionality is wrapped in useEffect, so should be safe to use in the context of Next.js. The hook will attempt to read the value from localstorage before subsequent requests, and supports several forms of cache invalidation.

Important: Only axios.get requests are supported and will be cached.

Install

Prerequisites: peerDependencies include axios >= 0.22.0 and react 16.8.0 || >= 17.0.0

Using npm

npm install --save react-axios-localstorage

Using yarn

yarn add react-axios-localstorage

Usage

Default implementation

This will create a localstorage entry with the cache key products, for the endpoint /api/v1/products.

import useAxiosCache from 'react-axios-localstorage';

const Component: React.FC<any> = () => {
  const { data, error, loading } = useAxiosCache(
    'products',
    'https://mysite.com/api/v1/products'
  );

  if (loading) {
    return <>Loading ...</>;
  }

  if (error) {
    return <>{error}</>;
  }

  return <>{data}</>;
};

By default, the query string parameters (if any) are used as a unique invalidator that will cause the cached endpoint to be invalidated.

const { data, error, loading } = useAxiosCache(
  'products',
  'https://mysite.com/api/v1/products?query=true'
);

// Triggers a network request to refresh the data - invalidating the previously cached `query=true` data
const { data, error, loading } = useAxiosCache(
  'products',
  'https://mysite.com/api/v1/products?query=false'
);

Custom invalidations

Advanced configuration can be specified to manually override several different values. See Configuration for full set of values.

const { loggedIn } = useAuthorization();
const { previewMode } = useCMSPreviewMode();
const { data, error, loading } = useAxiosCache(
  'products',
  'https://mysite.com/api/v1/products?query=true',
  {
    invalidator: loggedIn, // Will cause the cache to be invalidated based on the `loggedIn` status in addition to the `query` parameter
    invalidationMS: 10 * 60 * 1000, // 10 minutes
    bypass: previewMode, // If previewMode is true, the cache will be bypassed.
    prefix: 'abc', // Produces the cache key 'abc_products'.
    version: process.env.MY_UNIQUE_SHA,
  }
);

Configuration

Option	Type	Default	Purpose
invalidator	string	undefined if no query string parameters are provided, otherwise it will use the query string parameter values	Used as a custom field for determining when to refresh the cached localstorage value
bypass	boolean	false	Indicates whether to skip caching and cache checking for an individual request - useful for CMS preview modes
prefix	string	ral	Added to the front of each cache key to provide uniqueness
version	string	process.env.GITHUB_ACTIONS && process.env.GITHUB_SHA	Used for version-based invalidations on CI/CD redeploys or releases
invalidationMS	number	300000 (5 minutes)	A time in ms after which the cache key will be invalidated