Skip to content

React + Axios hook for client browser localstorage caching.

License

Notifications You must be signed in to change notification settings

cdhawke/react-axios-localstorage

Repository files navigation

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

About

React + Axios hook for client browser localstorage caching.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published