@rickbrown/use-fetch NPM

@rickbrown/use-fetch

A custom React hook to simplify the fetch API. This has been created as part of a blog post series. Part one can be seen here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To get this boilerplate running locally you will need:

a node package manager (yarn or npm)
a command line terminal (iTerm or bash)
your favorite IDE (vscode, sublime)

Install

npm install --save @rickbrown/use-fetch

Usage

import React from 'react'
import { useFetch } from '@rickbrown/use-fetch'

const App = () => {
  const [response, error, isLoading] = useFetch(
    `https://jsonplaceholder.typicode.com/users/5`
  )

  if (isLoading) {
    // can be used for loading indicator/spinner etc.
    return <h1>Loading..</h1>
  }

  if (error) {
    // handle any error
    console.log(error.message)
  }

  // if the code reaches this point, loading has been completed and there is no error
  // you have been returned a `response` object
  return (
    <>
      <pre>response: {JSON.stringify(response, null, 2)}</pre>
    </>
  )
}

export default App

The `response` object

{
  'end-point': String,
  status: Number,
  error: Boolean,
  'data-type': String,
  'data-length': Number,
  data: Object
}

So, if you wanted to remove all the extra information, and you only want the data object, and you are only using the use-fetch hook once in your component, your API could look like this:

const [{ data }, error, isLoading] = useFetch(
  `https://jsonplaceholder.typicode.com/users/5`
)

Chaining Multiple Requests

use-fetch will also accept a conditional statement. I will give an example by checking the URL. In this example we only want to make the request for the forecastData when the first fetch call for weatherData has been resolved. So we can use a ternary operator in the second fetch call. If there is no weatherData, we just return, and the hook does nothing. This conditional allows us to use our hook multiple times in the same component:

const [weatherData, weatherError, weatherIsLoading] = useFetch(
  `http://api.openweathermap.org/data/2.5/weather?lat=${coords.lat}&lon=${coords.long}&APPID=${WEATHER_API_KEY}&units=metric`
)

const [forecastData, forecastError, forecastIsLoading] = useFetch(
  weatherData.data
    ? `http://api.openweathermap.org/data/2.5/forecast/daily?id=${weatherData.data.id}&appid=${WEATHER_API_KEY}`
    : null
)

Running the tests

Available scripts:

yarn test
yarn test:watch
yarn test:coverage

Built With

create-react-hook - CLI for creating reusable React hooks using Rollup and create-react-app.
react - A JavaScript library for building user interfaces.
rollup - Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
react-hooks-testing-library - Simple and complete React hooks testing utilities that encourage good testing practices.
node-fetch - A light-weight module that brings window.fetch to Node.js