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

custom fetch hook for react.js GET and POST request

Grumpy Giraffe answered on July 7, 2022 Popularity 7/10 Helpfulness 1/10

answer custom fetch hook for react.js GET and POST request

related react fetch custom hook

custom fetch hook for react.js GET and POST request

Comment

import { useState, useEffect } from "react"

export const useFetch = (url, method = "GET") => {
  const [data, setData] = useState(null)
  const [isPending, setIsPending] = useState(false)
  const [error, setError] = useState(null)
  const [options, setOptions] = useState(null)

  const postData = (postData) => {
    setOptions({
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(postData)
    })
  }

  useEffect(() => {
    const controller = new AbortController()

    const fetchData = async (fetchOptions) => {
      setIsPending(true)
      
      try {
        const res = await fetch(url, { ...fetchOptions, signal: controller.signal })
        if(!res.ok) {
          throw new Error(res.statusText)
        }
        const data = await res.json()

        setIsPending(false)
        setData(data)
        setError(null)
      } catch (err) {
        if (err.name === "AbortError") {
          console.log("the fetch was aborted")
        } else {
          setIsPending(false)
          setError('Could not fetch the data')
        }
      }
    }

    // invoke the function
    if (method === "GET") {
      fetchData()
    }
    if (method === "POST" && options) {
      fetchData(options)
    }

    return () => {
      controller.abort()
    }

  }, [url, method, options])

  return { data, isPending, error, postData }
}

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: fetch get hook javascript post request

Link to this answer
Share Copy Link

Contributed on Aug 10 2022

Grumpy Giraffe

0 Answers Avg Quality 2/10

Closely Related Answers

react fetch custom hook

Comment

import { useEffect, useState } from "react"
import axios from "axios"


export default function useFetch(url){

    const [data,setData] = useState(null)
    const [error,setError] = useState(null)
    const [loading,setLoading] = useState(false)

    useEffect(() => {
        (
            async function(){
                try{
                    setLoading(true)
                    const response = await axios.get(url)
                    setData(response.data)
                }catch(err){
                    setError(err)
                }finally{
                    setLoading(false)
                }
            }
        )()
    }, [url])

    return { data, error, loading }

}

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: dev.to

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Jul 07 2022

AhmedHassan

0 Answers Avg Quality 2/10

custom fetch hook for react.js GET and POST request

Contents

More Related Answers

custom fetch hook for react.js GET and POST request

Closely Related Answers

react fetch custom hook

Grepper

Documentation

Social

Legal

Contact

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