useFetch

React hook to fetch data from an API.

Add the hook via the CLI:

npx @novajslabs/cli add useFetch

Or copy and paste the code into your project:

import { useState, useEffect, useRef } from 'react'

// Define the interface for the data returned by the API.
interface Data {}

// Define the interface for the error returned by the API.
interface Error {}

export const useFetch = (url: string, reqOpt?: RequestInit) => {
  const [data, setData] = useState<Data>()
  const [error, setError] = useState<Error>()
  const [isLoading, setIsLoading] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const effectRan = useRef(false)

  const fetchData = async () => {
    setIsLoading(true)

    try {
      const res = await fetch(url, reqOpt && reqOpt)
      const data = await res.json()

      if (res.status === 200) {
        setIsSuccess(true)
        setData(data)
        setError(undefined)
      } else {
        setIsSuccess(false)
        setError(data)
        setData(undefined)
      }
    } catch (e) {
      setIsSuccess(false)
      setData(undefined)
      if (e instanceof Error) {
        setError(e)
      }
    }

    setIsLoading(false)
  }

  useEffect(() => {
    !effectRan.current && fetchData()

    return () => {
      effectRan.current = true
    }
  }, [])

  const refetch = () => fetchData()

  return { data, error, isLoading, isError: !isSuccess, isSuccess, refetch }
}

Requirements

React 16.8 or higher

Parameters

Name
url
Type
string
Required
required
Description
The url of the API endpoint.
Name
reqOpt
Type
RequestInit
Optional
optional
Description
An object that contains any custom settings that you want to apply to the request. It is the same object that is passed to the JavaScript fetch function.

Return values

Name
data
Description
The data object for the query, if an error was not thrown.
Name
error
Description
The error object for the query, if an error was thrown.
Name
isLoading
Type
boolean
Description
Represents whether data is being fetched (true) or not (false).
Name
isError
Type
boolean
Description
Represents whether an error occurred while fetching the data (true) or not (false).
Name
isSuccess
Type
boolean
Description
Represents whether the data fetch was successful (true) or not (false).
Name
refetch
Type
function
Description
Manually refetch the query.

Example

import { useFetch } from './hooks/useFetch'

const App = () => {
  const { data, error, isLoading, isError, isSuccess, refetch } = useFetch(
    'https://api.quotable.io/random',
  )

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    console.log(error)
    return <span>Error</span>
  }

  if (isSuccess) {
    console.log(data)
  }

  return (
    <div>
      <p>{data && data.content}</p>
      <button onClick={refetch}>Another quote</button>
    </div>
  )
}

export default App

Use cases

Here are some use cases where this React hook is useful:

Fetching real-time weather data from an API in a weather forecast web application
Retrieving user profile information from a server in a social media dashboard
Loading product details from an e-commerce API in a product catalog website