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>
);

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

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

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

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

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

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