tinylibs

  🪝
Axios Cache Hooks

`Axios Cache Hooks` is the faster, simple and efficient way to use Axios inside React applications.

Table of Contents
Installing
- Url Import
Getting Started
How it works
Documentation
Compatibility
License

Installing

npm   install axios axios-cache-interceptor axios-cache-hooks
yarn  add     axios axios-cache-interceptor axios-cache-hooks

import { createAxiosHooks } from 'axios-cache-hooks';
const { createAxiosHooks } = require('axios-cache-hooks');
const { createAxiosHooks } = window.axiosCacheHooks;

<script
  crossorigin
  src="https://cdn.jsdelivr.net/npm/axios-cache-hooks@latest/dist/index.umd.js"
></script>

Url Import

import { createAxiosHooks } from 'https://cdn.skypack.dev/axios-cache-hooks@latest';

Getting Started

Axios Cache Hooks is a super effective and performant way to use Axios calls inside React applications. That is because it heavily uses (and only works with) Axios (6.7Kb) and Axios Cache Interceptor (4.2Kb) under the hood.

// http.ts
import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';
import { createAxiosHooks } from 'axios-cache-hooks';

export const axios = setupCache(Axios);
export const { useQuery, useMutation } = createAxiosHooks();

/** Returns an user by his name */
export function getUser(name: string, config?: AxiosRequestConfig): Promise<User> {
  return axios.get<User>(`users/find-by-name/${name}`, config);
}

// component.tsx
import { useQuery, getUser } from './http';

export const UserAge = ({ username }) => {
  // This will share cache between ALL components that uses the same query and parameters.
  const [user, { loading, error }] = useQuery(getUser, username);

  return (
    <Layout>
      <p>{loading ? 'loading...' : user.age}</p>
    </Layout>
  );
};

How it works

Basically, this package works by ignoring any useEffect to save state and calling axios on every draw. As we have axios-cache-interceptor working as an interceptor, this is fine as most of them will be resolved with in-memory data, in the same way as a useEffect + useState combination.

By extracting your requests into dedicated functions, like the getUser above, we can enable caching requests at each component level, and even share cache between your micro-frontend setup.

This works flawlessly because Axios Cache Interceptor has a concept of Request IDs that defines which requests should be treated as the same and reused.

Documentation

This package is just a “bridge” between Axios with Cache and React. Please read the Axios Cache Interceptor documentation for any cache issues.

Start by creating your requests functions, in the same way as getUser in the above example, and then use the returned hooks created by createAxiosHooks, which can be called in a top-level file and imported anywhere.

It will create a useQuery and useMutation. Both of them accepts the same parameters, and works in the same way.

// Calls and starts immediately
const [user, { loading, error }] = useQuery(getUser, username);

<div>{loading ? 'loading' : user.name}</div>;

// Calls and only works after calling the `request` function
const [{ data: user, loading, error }, request] = useMutation(getUser);

<MyFormComponent
  onSubmit={(data) => {
    request(data.name);
  }}
/>;

Every documentation is available in the form of TSDoc. You can start by importing createAxiosHooks and using the returned hooks.

Compatibility

This package is dependent of AxiosCacheInterceptor@>=0.8 and Axios@>=0.28 because of this PR.

License

Licensed under the MIT. See LICENSE for more informations.

This site is open source. Improve this page.

tinylibs

🪝Axios Cache Hooks

Axios Cache Hooks is the faster, simple and efficient way to use Axios inside React applications.

Table of Contents