React-use-axios-react-PROSAGA-码农传奇

WARNING: not maintained, feel free to fork and use in any way

npm i axios use-axios-react

Features

Hooks for ✅ data fetching ✅ CRUD ✅ Batch operations
✅ Request cancellation
✅ Retry/reload callbacks
✅ Zero-configuration, yet fully configurable when needed
✅ No app architecture commitments, drop in into your React and Axios project and start using hooks in your new components
No extra-dependencies (React and Axios are peer dependencies), thus minimum overhead if your project already uses axios
All axios features

Installation

npm i use-axios-react

Make sure axios itself is installed

npm i axios

And make sure you use React v16.8.0 or newer.

Examples

Basic data fetching (GET)

import React from "react";
import { useGetData } from "use-axios-react";
const KanyeQuote = () => {
  const [data, loading] = useGetData("https://api.kanye.rest/");
  if (loading) return <div>Loading...</div>;
  return <blockquote>{data.quote}</blockquote>;
};

Cancellable fetching (GET) with reload and retry

import React from "react";
import { useGetData } from "use-axios-react";
const KanyeQuote = () => {
  const [data, loading, { error, retry }] = useGetData("https://api.kanye.rest/", { cancelable: true });
  if (loading) return <Spinner ></Spinner>;
  if (error) return <Button onClick={retry} label="RETRY" ></Button>;
  return (
    <div>
      <Quote>{data.quote}</Quote>
      <Button onClick={retry} label="RELOAD" ></Button>
    </Fragment>
  );
};

Basic POST example

import React from "react";
import { usePostCallback } from "use-axios-react";
function userToRequest({ name, job }) {
  return {
    url: "https://reqres.in/api/users",
    data: { name, job }
  };
}
const CreateUser = () => {
  const [create, sending, { error, data }] = usePostCallback(userToRequest);
  const neo = { name: "Neo", job: "The One" };
  const morpheus = { name: "Morpheus", job: "Leader" };
  return (
    <Layout>
      <Button onClick={() => create(neo)}>Neo</Button>
      <Button onClick={() => create(morpheus)}>Morpheus</Button>
      <StatusBar sending={sending} error={error} lastUser={data} ></StatusBar>
    </Layout>
  );
};

Pagination

js
import React, { useState } from "react";
import { useGetData } from "use-axios-react";

const PaginatedKanyeQuotes = () => {
  const [page, setPage] = useState(1);
  const [data, loading] = useGetData(
    { url: "https://api.kanye.rest/", params: { page } },
    { cancelable: true }
  );

  if (loading) return <Spinner ></Spinner>;

  const prev = () => setPage(page - 1);
  const next = () => setPage(page + 1);

  return (
    <div>
      <Quote>{data.quote}</Quote>
      <div>
        <Button onClick={prev} disabled={page <= 1} label="← Prev" ></Button>
        <span className="mx-5">Page {page}</span>
        <Button onClick={next} disabled={page >= 9} label="Next →" />
      </div>
    </div>
  );
};

Basic TodoMVC CRUD

js
import React from "react";
import axios from "axios";
import {
  provideAxiosInstance,
  useGetData,
  usePostCallback,
  useDeleteCallback,
  usePatchCallback
} from "use-axios-react";

provideAxiosInstance(
  axios.create({
    baseURL: "https://todo-backend-golang-goa.herokuapp.com"
  })
);

/**
 * Map todos to axios request configs
 */
const todoObjectToAxiosRequest = ({ id, title, order, completed }) => ({
  url: id ? `/todos/${id}` : "/todos",
  data: { title, order, completed }
});

const TodoMvcApp = () => {
  // Reusing the same mapping function for all CRUD requests
  const [create, creating, { error: createError }] = usePostCallback(todoObjectToAxiosRequest);
  const [remove, removing, { error: removeError }] = useDeleteCallback(todoObjectToAxiosRequest);
  const [update, updating, { error: updateError }] = usePatchCallback(todoObjectToAxiosRequest);

  // Re-fetch after any of actions is completed
  const allRequestsDone = !creating && !removing && !updating;
  const [todos = [], fetching, { error: fetchError }] = useGetData("/todos", {
    // The hook will re-run every time `depends` changes
    depends: [creating, removing, updating],
    // Actual request will be performed only if this is true
    willRun: allRequestsDone
  });

  if (createError || removeError || updateError || fetchError) {
    return <div>Error occurred, please reload</div>;
  }

  return (
    <Layout>
      <Header loading={creating || removing || updating || fetching}>
        <NewTodo create={create} ></NewTodo>
      </Header>
      <TodoList todos={todos} remove={remove} update={update} loading={fetching} ></TodoList>
    </Layout>
  );
};

Common state GET & POST

js
import React, { useEffect } from "react";
import { useGetData, usePostCallback } from "use-axios-react";

const CreateUser = () => {

  // Do an initial load
  const [users = [], loading, { error: loadError, setData: setUsers }] = useGetData("https://reqres.in/api/users");

  // We're particularly interested in the create() callback and the response data (new user data)
  const [create, creating, { error: createError, data: newUser }] = usePostCallback("https://reqres.in/api/users");

  // Update users state evey time the newUser changes
  useEffect(
    () => {
      newUser && setUsers([...users, newUser]);
    },
    [newUser]
  );

  return (
    <Layout>
      <Button onClick={() => create({})}>Create dummy user</Button>

      <span>{(loading || creating) && "Loading..."}</span>
      <span>{(loadError || createError) && "Error occurred"}</span>

      <UserList users={users} ></UserList>
    </Layout>
  );
};

Using custom axios instance

js
import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import { provideAxiosInstance, useGetData } from "use-axios-react";

const customAxiosInstance = axios.create({
  baseURL: "https://reqres.in/api",
  transformResponse: axios.defaults.transformResponse.concat(data => {
    return data.data;
  })
});

provideAxiosInstance(customAxiosInstance);

function App() {
  const [users, loading] = useGetData("/users");

  if (loading) return "Loading...";

  return (
    <div>
      <h1>Users:</h1>
      <code>{JSON.stringify(users)}</code>
    </div>
  );
}

Example apps

Full featured TodoMVC app

API Overview

Hooks

`useGetData()`	Use this one if you need to fetch data depending on some state (e.g. to fetch search results depending on search term)
`usePostCallback()` `usePutCallback()` `usePatchCallback()` `useDeleteCallback()` `useGetCallback()`	Use this if you need to create callbacks to trigger a request programmatically
`useParallelPostCallback()` `useParallelPutCallback()` `useParallelPatchCallback()` `useParallelDeleteCallback()` `useParallelGetCallback()`	Use this if you need to create callbacks to trigger batch requests

Settings

provideAxiosInstance() Provide a custom axios instance to use with the hooks

API Reference

`useGetData(url|axiosConfig, options): []`

url|axiosConfig — Refer to axios request config documentation for details
options — The use{...}Data hook options:

`cancelable: bool`	Whether the request should be canceled on component unmount
`depends: []`	Hook’s effect will be re-run only if one of the passed array values changes. Refer to the React useEffect(effect, depends) second argument docs to learn how it works.
`willRun: bool`	Request will be be executed only if this option is true. This is usually an expression such as `willRun: !loading`

result array structure is [data, loading, { error, response, retry, retriesCount, setData }]:

`use{Method}Callback(url|axiosConfig|factory, options): []`

Where {Method} is one of the following: Post, Put, Patch, Delete, Get

url|axiosConfig|factory — Request URL, axios config object or factory, producing an axios config object from
callback args

result array structure is [exec, loading, { error, retry, response, data, execCount, input }]:

`useParallel{Method}Callback(axiosConfigFactory): []`

Where {Method} is one of the following: Post, Put, Patch, Delete, Get

axiosConfigFactory — A function producing an axios config object from
callback args

result array structure is [exec, loading, { retry, errors, responses, data, succeed, failed, execCount, input }]