react-axios-use-request v1.1.0

react-axios-use-request

React hook for managing http requests with axios

Installation

You need to install axios too

yarn add react-axios-use-request axios

npm install react-axios-use-request axios --save

Usage

import React from 'react'
import useRequest from 'react-axios-use-request';

const getPostComments = (postId) => ({
  method: 'get',
  url: `https://jsonplaceholder.typicode.com/posts/${postId}/comments`,
});

const createPost = () => ({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1,
  },
});

const getPostOptions = {
  getRequestPayload: getPostComments,
  cachePolicy: 'no-cache',
  dataUpdater: (currentData, responseData) => [...responseData, ...currentData],
  initialData: [],
  onAbort: () => {},
};
const createPostOptions = {
  getRequestPayload: createPost,
};

function App () {
  const {
    loading,
    error,
    data,
    doRequest,
    reset,
    abort,
    updateData: updatePosts,
  } = useRequest(getPostOptions);

  const {
    doRequest: apiCreatePost,
  } = useRequest(createPostOptions);
  
  if (loading) return ...

  if (error) return ...
  
  console.log(data);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          doRequest(1)
            .then((r) => console.log(r))
            .catch((e) => console.log(e));
        }}
      >
        fetching
      </button>
      <button
        type="button"
        onClick={() => {
          apiCreatePost().then((response) => {
            updatePosts([
              response.data,
              ...data,
            ]);
          });
        }}
      >
        create
      </button>
      <button type="button" onClick={abort}>
        abort
      </button>
      <button type="button" onClick={reset}>
        reset
      </button>
    </>
  )
} 

Supported Options

Notice

It is recommended that your options object should be outside of component, remain same reference.

import React from 'react'
import useRequest from 'react-axios-use-request';

const getPostComments = (postId) => ({
  method: 'get',
  url: `https://jsonplaceholder.typicode.com/posts/${postId}/comments`,
});

const options = {
  getRequestPayload: getPostComments,
};

function App () {
  const {
    loading,
    error,
    data,
    doRequest,
    reset,
    abort,
  } = useRequest(options);
  ...
} 

Or you can use useMemo to wrap your options and pass necessary props to dependency array

const options = useMemo(() => ({
  getRequestPayload: getPostViaUserId,
}), []);

Supported API

Notice

doRequest will return Promise in the end, so if you want to do something after request success..

doRequest().then((r) => do something after success).catch((e) => do something when error)

doRequest、reset、abort、updateData These functions identity are stable and won’t change on re-renders. So you can safe to include or omit from the useEffect dependency list

useEffect(() => {
  doRequest(userId);
}, [doRequest, userId]);