React Hooks Fetch Save

Minimal data fetching library with React Suspense

Project README

react-hooks-fetch

CI npm size discord

Minimal data fetching library with React Suspense

Introduction

This library provides a React hook useFetch for any async functions. It utilizes React Suspense and FetchProvider is required with initial inputs. The initial inputs are used to run all async function in the initial render.

Project status: Experimental. We need to collect feedbacks.

Design choices:

  • No string keys
  • Force prefetching
  • Cache size one
  • React context based

Install

npm install react-hooks-fetch

Usage

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

import { FetchProvider, useFetch } from 'react-hooks-fetch';

// 1️⃣
// Create a fetch function.
// The function can take one input argument.
const fetchFunc = async (userId) => {
  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);
  const data = await res.json();
  return data;
};

// 2️⃣
// Define a component to use the fetch function.
// The `refetch` function take a new input argument,
// and it will start fetching before rendering.
const Main = () => {
  const { result, refetch } = useFetch(fetchFunc);
  const handleClick = () => {
    refetch('2');
  };
  return (
    <div>
      <div>First Name: {result.data.first_name}</div>
      <button type="button" onClick={handleClick}>Fetch user 2</button>
    </div>
  );
};

// 3️⃣
// FetchProvider is required with initialInputs.
// We should put ErrorBoundary and Suspense inside FetchProvider.
const App = () => (
  <FetchProvider initialInputs={[[fetchFunc, '1']]}>
    <ErrorBoundary fallback={<h1>Error</h1>}>
      <Suspense fallback={<span>Loading...</span>}>
        <Main />
      </Suspense>
    </ErrorBoundary>
  </FetchProvider>
);

API

FetchProvider

FetchProvider component

Put this component higher in the component tree.

Parameters

  • $0 FetchProviderProps

    • $0.initialInputs
    • $0.children

Examples

import { FetchProvider } from 'react-hooks-fetch';

const App = () => (
  <FetchProvider initialInputs={[[fn, input]]}>
    ...
  </FetchProvider>
);

useRefetch

useRefetch hook

This returns only refetch part of what useFetch returns.

Parameters

  • fn FetchFunc<Input, Result>

Examples

import { useFetch } from 'react-hooks-fetch';

const refetch = useRefetch(desc);
refetch('1');

useFetch

useFetch hook

This is the main hook to be used.

Parameters

  • fn FetchFunc<Input, Result>
  • options {allowUndefined: boolean}?

Examples

import { useFetch } from 'react-hooks-fetch';

const { input, result, refetch } = useFetch(desc);

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03

Blogs

See History for previous implementations.

Translations

This is also available in other languages:

Open Source Agenda is not affiliated with "React Hooks Fetch" Project. README Source: dai-shi/react-hooks-fetch
Stars
398
Open Issues
8
Last Commit
11 months ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating