zaingz / use-axios-hooks

axios hooks for common network calls scenarios

use-axios-hooks

axios hooks for common network calls scenarios

Read here about my motivation for developing this library: https://medium.com/@zaingz/how-react-hooks-compares-to-redux-eba43788df46

Features

• Simple and easy to use, no configuration needed.
• Built on top of axios api.
• Ability to retry if api call fails.
• Ability to do api polling.
• Ability to cancel in flight api calls.
• Plays nicely with react component life cycle.

Installation

npm install --save axios use-axios-hooks

Axios is peerDependency of this lib so make sure you install axios separately.

Usage

import  React,  {  Component  }  from  'react'
import  { useAxios }  from  'use-axios-hooks'


const  Example  =  ()  =>  {
const  [{data, isLoading, error, isCanceled},  cancel] = useAxios('http://my-awesome-api/endpoint')

return (
  <div>
    {isLoading  &&  'Loading...'}
    {data && JSON.stringify(data)}
    {error && JSON.stringify(error)}
    <button onClick={() => cancel()}>cancel</button>
  </div>
)
}

Retry on error:

import  React,  {  Component  }  from  'react'
import  { useAxiosRetry }  from  'use-axios-hooks'


const  Example  =  ()  =>  {
const  [{data, isLoading, error, isCanceled},  cancel] = useAxiosRetry(
    "https://api-will-fail/retry",
    {
      retryCount: 2,
      retryInterval: 2000
    }
  );

return (
  <div>
    {isLoading  &&  'Loading...'}
    {data && JSON.stringify(data)}
    {error && JSON.stringify(error)}
    <button onClick={() => cancel()}>cancel retrying</button>
  </div>
)
}

Polling:

import  React,  {  Component  }  from  'react'
import  { useAxiosInterval }  from  'use-axios-hooks'


const  Example  =  ()  =>  {
const  [{data, isLoading, error, isCanceled},  cancel] = useAxiosInterval(
    "https://awesome-api/poll",
    4000
  );

return (
  <div>
    {isLoading  &&  'Loading...'}
    {data && JSON.stringify(data)}
    {error && JSON.stringify(error)}
    <button onClick={() => cancel()}>cancel polling</button>
  </div>
)
}

---

API

useAxios(url | config)

Basic hook to make network calls.

• url | config The request url or axios request config object.

Returns [{data, isLoading, error, isCanceled}, cancel]

• data The response object returned by axios.
• isLoading Boolean to indicate if request is started but not completed.
• error Error object returned by axios.
• isCancelled Boolean to indicate if request is canceled.
• cancel Function to cancel pending network call. (It uses axios cancellation api).

useAxiosRetry(url | config, options)

Hook to retry network call on error.

• url | config The request url or axios request config object.

• options Configuration to specify retry options i.e { retryCount: number, retryInterval: milliseconds }

Returns [{data, isLoading, error, isCanceled}, cancel]

• data The response object returned by axios.
• isLoading Boolean to indicate if request is started but not completed.
• error Error object returned by axios.
• isCancelled Boolean to indicate if request is canceled.
• cancel Function to cancel retying.

useAxiosInterval(url | config, interval)

Hook to do repeated network call after an interval (long polling).

• url | config The request url or axios request config object.

• interval Interval in milliseconds in which network will be made.

Returns [{data, isLoading, error, isCanceled}, cancel]

• data The response object returned by axios.
• isLoading Boolean to indicate if request is started but not completed.
• error Error object returned by axios.
• isCancelled Boolean to indicate if request is canceled.
• cancel Function to cancel the polling.

License

MIT © zaingz

---

This hook is created using create-react-hook.

use-axios-hooks's Issues

useAxiosInterval result always null?

I am trying to get updates from API, e.g. new post? But unfortunately it doesn't return any data, it always returned null value.

Question: How can I use my axios client instance?

Hi, just a question.

Its possible to use it passing my axios instance? is just because i have authentication in a interceptor

const apiClient = axios.create({
  baseURL: '/.netlify/functions/',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
});

apiClient.interceptors.request.use(config => {
  const token = identity.currentUser()?.token?.access_token;
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

How I can call it on click of a button?

How I can call it on click of a button?

Please method POST example in readme.md

Please method POST example in readme.md