@lgse/use-axios-query
v1.6.0
Published
use-axios-query is a wrapper around axios and react-query.
Downloads
3
Readme
useAxiosQuery
useAxiosQuery is a wrapper around the axios HTTP Client, axios-retry and @tanstack/react-query
- Automatically retries idempotent requests
- Automatically cancels outgoing http requests if the calling component of the
useAxiosQuery
hook unmounts - Customizable 401 Status Code Handler
- Highly configurable
Install
The following peer dependencies are required:
- axios
1.x.x
- axios-retry
3.x.x
- @tanstack/react-query
4.x.x
- react
17.x.x
or18.x.x
npm install --save @lgse/use-axios-query axios axios-retry @tanstack/react-query
Usage
import * as React from 'react';
import { useAxiosQuery } from './useAxiosQuery';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
type Todo = {
completed: boolean;
id: number;
todo: string;
}
type DataType = Todo[]
type ResponseType = {
todos: Todo[]
}
const Todos = () => {
const [data, { error }] = useAxiosQuery<DataType>(['todos'], (axios, cancelRequest) => {
return axios.get<ResponseType>('https://dummyjson.com/todos').then(({ data: { todos } }) => todos);
});
if (Array.isArray(data) && !data.length) {
return <div>No todos to show</div>
}
if (Array.isArray(data) && data.length) {
return data.map(({ completed, id, todo }) => <div key={id}>{todo}{completed ? ' - Done!' : ''}</div>;
}
if (error) {
return <div>Error fetching todos :(</div>;
}
return <div>Loading...</div>
};
const App = () => {
return (
<QueryClientProvider client={new QueryClient()}>
<Todos />
</QueryClientProvider>
)
}