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.0andreact 16.8.0 || >= 17.0.0
Using npm
npm install --save react-axios-localstorageUsing yarn
yarn add react-axios-localstorageUsage
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 |