[](https://github.com/arthurfiorette/tinylibs/issues)
[](https://github.com/arthurfiorette/tinylibs/stargazers)
[](https://github.com/arthurfiorette/tinylibs/blob/main/LICENSE)
[](https://codecov.io/gh/arthurfiorette/tinylibs)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Farthurfiorette%2Ftinylibs?ref=badge_shield)
[](https://gitter.im/tinylibs-js-org/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://twitter.com/acdlite/status/974390255393505280)
[](https://www.npmjs.com/package/axios-cache-hooks)
[](https://www.npmjs.com/package/axios-cache-hooks)
[](https://www.jsdelivr.com/package/npm/axios-cache-hooks)
[](https://bundlephobia.com/package/axios-cache-hooks@latest)
[](https://packagephobia.com/result?p=axios-cache-hooks@latest)
🪝 Axios Cache Hooks
Axios Cache Hooks is the faster, simple and efficient way to use Axios inside React applications.
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Installing](#installing)
- [Url Import](#url-import)
- [Getting Started](#getting-started)
- [Documentation](#documentation)
- [How it works](#how-it-works)
- [Compatibility](#compatibility)
- [License](#license)
## Installing
```sh
npm install axios axios-cache-interceptor axios-cache-hooks
yarn add axios axios-cache-interceptor axios-cache-hooks
```
```js
import { createAxiosHooks } from 'axios-cache-hooks';
const { createAxiosHooks } = require('axios-cache-hooks');
const { createAxiosHooks } = window.axiosCacheHooks;
```
```html
```
### Url Import
```ts
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. It is very performant because it deeply uses _(and only works with)_
[Axios](https://axios-http.com) `(6.7Kb)` and
[Axios Cache Interceptor](https://axios-cache-interceptor.js.org/) `(4.2Kb)` under the
hood.
```ts
// 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 {
return axios.get(`users/find-by-name/${name}`, config);
}
```
```js
// 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 (
{loading ? 'loading...' : user.age}
);
};
```
## Documentation
> **This package is just a "bridge" between Axios with Cache and React**. Please read the
> [`Axios Cache Interceptor`](https://github.com/arthurfiorette/axios-cache-interceptor)
> documentation for any cache issue.
This package is so small that every documentation is available in the form of `TSDoc`. You
can start by importing `createAxiosHooks` and using the returned hooks.
- [Github](https://github.com/arthurfiorette/tinylibs/tree/main/packages/axios-cache-hooks)
- [Website](https://tinylibs.js.org/packages/axios-cache-hooks)
- [NPM](https://npm.im/axios-cache-hooks)
- [Axios Cache Interceptor Docs](https://axios-cache-interceptor.js.org/#/)
- [React Docs](https://reactjs.org/docs/hooks-intro.html)
- [Axios Docs](https://axios-http.com/docs/intro)
## How it works
Basically, this package calls the provided http function on every draw, this is fine
because you can only use this hook with `axios-cache-interceptor` which caches very
effectively axios request, only allowing needed axios request to go through network.
By extracting you request functions into dedicated functions, like the `getUser` above,
you'll enable caching requests at a component level, even for your micro-frontend setup.
This works flawlessly because `Axios Cache Interceptor` has a concept of
[`Request IDs`](https://axios-cache-interceptor.js.org/#/pages/request-id) that defines
which requests are the same or not.
If you still have any questions, please feel free to create an issue and i'll be happy to
help (and even improve this readme).
## Compatibility
This package is dependent of `AxiosCacheInterceptor@>=0.8` and `Axios@>=0.28`
[because of this PR](https://github.com/axios/axios/pull/4659).
## License
Licensed under the **MIT**. See [`LICENSE`](LICENSE) for more informations.
[](https://app.fossa.com/projects/git%2Bgithub.com%2Farthurfiorette%2Ftinylibs?ref=badge_small)