fetch-suspense

by CharlesStover

CharlesStover /fetch-suspense

A React hook compatible with React 16.6's Suspense component.

453 Stars 24 Forks Last release: about 1 year ago (v1.2.0) MIT License 55 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

useFetch Tweet version minified size minzipped size downloads build

useFetch
is a React hook that supports the React 16.6 Suspense component implementation.

The design decisions and development process for this package are outlined in the Medium article React Suspense with the Fetch API.

Install

  • npm install fetch-suspense
    or
  • yarn add fetch-suspense

Examples

Basic Example

import useFetch from 'fetch-suspense';
import React, { Suspense } from 'react';

// This fetching component will be delayed by Suspense until the fetch request // resolves. The return value of useFetch will be the response of the server. const MyFetchingComponent = () => { const response = useFetch('/path/to/api', { method: 'POST' }); return 'The server responded with: ' + response; };

// The App component wraps the asynchronous fetching component in Suspense. // The fallback component (loading text) is displayed until the fetch request // resolves. const App = () => { return ( ); };

Using a Custom Fetch API

If you don't want to rely on the global

fetch
API, you can create your own
useFetch
hook by importing the
createUseFetch
helper function.
import { createUseFetch } from 'fetch-suspense';
import myFetchApi from 'my-fetch-package';
import React, { Suspense } from 'react';

// Create a useFetch hook using one's own Fetch API. // NOTE: useFetch hereafter refers to this constant, not the default export of // the fetch-suspense package. const useFetch = createUseFetch(myFetchApi);

// This fetching component will be delayed by Suspense until the fetch request // resolves. The return value of useFetch will be the response of the server. const MyFetchingComponent = () => { const response = useFetch('/path/to/api', { method: 'POST' }); return 'The server responded with: ' + response; };

// The App component wraps the asynchronous fetching component in Suspense. // The fallback component (loading text) is displayed until the fetch request // resolves. const App = () => { return ( ); };

Including Fetch Metadata

To include fetch metadata with your response, include an

options
parameter with
metadata: true
.
import useFetch from 'fetch-suspense';
import React, { Suspense } from 'react';

// This fetching component will be delayed by Suspense until the fetch request // resolves. The return value of useFetch will be the response of the server // AS WELL AS metadata for the request. const MyFetchingComponent = () => { const { contentType, response } = useFetch( '/path/to/api', { method: 'POST' }, { metadata: true }, // { return ( ); };

Options

The supported options for the third, options parameter are:

lifespan?: number

Default: 0

The number of milliseconds to cache the result of the request. Each time the component mounts before this many milliseconds have passed, it will return the response from the last time this same request was made.

If 0, the cache will be last the remainder of the browser session.

metadata?: boolean

Default: false

If true, the

useFetch
hook will return metadata in addition to the response from the fetch request. Instead of returning just the response, an interface as follows will be returned:
interface UseFetchResponse {
  bodyUsed: boolean;
  contentType: null | string;
  headers: Headers;
  ok: boolean;
  redirected: boolean;
  // The same response from the server that would be returned if metadata were
  //   false. It is an Object is the server responded with JSON, and it is a
  //   string if the server responded with plain text.
  response: Object | string;
  status: number;
  statusText: string;
  url: string;
}

You can access these properties easily through destructuring. See Including Fetch Metadata.

Sponsor ๐Ÿ’—

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.