Namibian Pyjama Merchant

    use-axios-react

    0.2.3 • Public • Published
    🚀 Axios in React in the hooks era

    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)

    Edit Fetch example

    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

    Edit Cancelable fetch with reload & 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 />;
      if (error) return <Button onClick={retry} label="RETRY" />;
     
      return (
        <div>
          <Quote>{data.quote}</Quote>
          <Button onClick={retry} label="RELOAD" />
        </Fragment>
      );
    };

    Basic POST example

    Edit 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} />
        </Layout>
      );
    };
    Pagination

    Edit Pagination

    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 />;
     
      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" />
            <span className="mx-5">Page {page}</span>
            <Button onClick={next} disabled={page >= 9} label="Next →" />
          </div>
        </div>
      );
    };
    Basic TodoMVC CRUD

    Edit TodoMVC CRUD

    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} />
          </Header>
          <TodoList todos={todos} remove={remove} update={update} loading={fetching} />
        </Layout>
      );
    };
    Common state GET & POST

    Edit Common state GET & POST

    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} />
        </Layout>
      );
    };

    Example apps

    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 }]

    Support 👩‍

    • Please feel free to create issues with questions

    Install

    npm i use-axios-react

    DownloadsWeekly Downloads

    13

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    155 kB

    Total Files

    14

    Last publish

    Collaborators

    • sergey-s