useAxios, for CREATE, UPDATE, DELETE, and useAxiosGet to read data form a rest API, stores it in the cache.
All error handling, and a status for pending, error idle, and success with the REST API.
npm i @sjblurton/use-axios
yarn add @sjblurton/use-axios
import { useAxiosGet, useAxios }from "@sjblurton/use-axios-get";
const [status, response, error, setAPICall] = useAxios<RequestData, ServerResponseData>();
const [status, data, error, mutate] = useAxiosGet<Data>('url')
returns a string of 'idle', 'pending', 'error', or 'success'
returns an AxiosResponse or undefined if not responded.
returns an AxiosError response or undefined if no error
returns the response data or undefined
takes one AxiosRequestConfig object with two values required, the url string and method as a string. plus all the optional ones, refer to the Axios docs here: https://axios-http.com/docs/req_config
setAxiosReq({
method: 'DELETE',
url: '/user/2',
})
function App() {
const todos = useAxiosGet<MockData>(
"https://jsonplaceholder.typicode.com/todos"
);
if (todos.status === "pending") return <div>loading...</div>;
if (todos.status === "error") return <div>{todos?.error?.message}</div>;
return (
<div className="App">
{todos?.data?.map((todo) => (
<h2>{todo.title}</h2>
))}
<button onClick={todos?.mutate}>Mutate</button>
</div>
);
}
GitHub: https://github.com/sjblurton/use-axios-get
NPM: https://www.npmjs.com/package/@sjblurton/use-axios-get