DEV Community

loading...

Easily fetch data: react-api-hook

Michele
An italian 19yo frontend developer!
・2 min read

When developing a complex web app with React, the best thing is modularise and break up the code in smaller components, hooks or functions.
So our code will be easier to maintain during the time, and it is more readable.

While reading this blog post, I understood how the usually fetch handling with:


import React, { useState } from 'react'

const ComponentWithFetch = () => {
    const [data, setData] = useState();
    const [isLoading, setIsLoading] = useState();

    const fetchTheData = () => {
        setIsLoading(true);
        //handle the fetch
    };

    return (
        <button
            onClick={fetchTheData}
            disabled={isLoading}
        >
            Start
        </button>
    );
};

export default ComponentWithFetch;

Enter fullscreen mode Exit fullscreen mode

Is basically wrong, because is detached from the logic, and this is not good.

So, I decided to make a package, to make this easier, and simply integrate in a project, declaring the hook in the component and passing the datas as parameters.

All the states of the fetch will be executed separately, in an independent logic, handled by useReducer.

It is also possible to cancel the request and the state will update with inAbort and then canceled

To install the package:

Go to the root of your React Project and, on the terminal, write:

npm i react-api-hook
Enter fullscreen mode Exit fullscreen mode

How to use the package

Now, you can use the package in any component:

import React,  {  useEffect  }  from  "react";
import useAPIHook from  "react-api-hook";

function  App()  {
    const  [state,  send,  cancel]  =  useAPIHook(
        "https://jsonplaceholder.typicode.com/posts",
        {  method:  "GET"  },
    );

    useEffect(()  =>  {
        if (status.status  ===  "success") {
            console.log(status.data);
            //status.data.json() for the body of response  
        }
        if(status.status  ===  "failure") {
            console.log(status.error);
        }
    }, [status]);

    return (
        <div  className="App">
            <header  className="App-header">
                <div>{status.state}</div>
                <div>
                    <button  onClick={send}>start fetching</button>
                    <button  onClick={cancel}>stop fetching</button>
                </div>
            </header>
        </div>
    );
}

export  default  App;
Enter fullscreen mode Exit fullscreen mode

You will see in the console the response and, on the screen, the status of the request.

Thanks for reading! I'm open to any pull request or suggestions in the comment!

Package link

Discussion (4)

Collapse
pavermakov profile image
Pavel Ermakov

Add a few more requests and turn your components into an unreadable mess.

Collapse
demicdev profile image
Michele Author

What do you mean?

Collapse
pavermakov profile image
Pavel Ermakov

Can you run multiple requests in parallel? Can you chain one request to another?

Thread Thread
demicdev profile image
Michele Author

If you have to run multiple request, you only have to declare another hook:

const [stateFirst, sendFirst, cancelFirst] = useAPIHook(ENDPOINT1, configFirst);
const [stateSecond, sendSecond, cancelSecond] = useAPIHook(ENDPOINT2, configSecond);
Enter fullscreen mode Exit fullscreen mode
Forem Open with the Forem app