Breaking News: Grepper is joining You.com. Read the official announcement!

api call hook react

Mehedi Islam Ripon answered on November 24, 2022 Popularity 10/10 Helpfulness 2/10

answer api call hook react

api call hook react

Comment

// ====== the hook ======
import { useCallback, useEffect, useRef, useState } from "react"
import axios, { AxiosResponse } from 'axios';

interface Props<T> {
    url: string;
    preFetch?: boolean;
    callback?: (res: AxiosResponse) => T;
}

export const useFetch = <T = any>({
    url,
    callback,
    preFetch = true,
}: Props<T>) => {
    const [data, setData] = useState<T>();
    const [error, setError] = useState<any>();
    const [loading, setLoading] = useState(preFetch);

    const fetchCall = useCallback(():Promise<AxiosResponse> => {
        setLoading(true);

        return new Promise(async (resolve, reject) => {
            try {
                const res = await axios.get(url);

                setData(!!callback ? callback(res) : res.data);

                resolve(res);
            }
            catch (error) {

                setError(error);
                setLoading(false);

                reject(error);
            }
        })
        
    }, [url, callback]);

    useEffect(() => {
        if (preFetch) {
            fetchCall();
        }
    }, [preFetch, fetchCall]);

    return {
        data,
        loading,
        error,
        fetch: fetchCall,
    }
}

// ====== usage =======
const { data, loading, fetch } = useFetch<string> ({
   url: '/api/hello',

   callback: (res) => {
      return res.data.name;
   }
});
console.log(data); // John Doe

// <------ OR ------>
const {data, loading, fetch} = useFetch<DataType>({
   url: '/api/hello'
});
console.log(data);

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: api call fetch fetch-api hook javascript react-typescript

Link to this answer
Share Copy Link

Contributed on Nov 24 2022

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

api call hook react

Contents

More Related Answers

api call hook react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.