Package Exports

react-suspense-fetch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-suspense-fetch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-suspense-fetch

A primitive library for React Suspense Render-as-You-Fetch

Introduction

The new Render-as-You-Fetch pattern is mind-blowing. So far, only Relay implemented that pattern for GraphQL. This library aims at implementing that pattern for REST APIs.

This is a highly experimental project. Everything will change.

Install

npm install react-suspense-fetch

Usage

import React, { Suspense, useState, useTransition } from 'react';
import ReactDOM from 'react-dom';

import { prefetch, refetch } from 'react-suspense-fetch';

const DisplayData = ({ result, update }) => {
  const [startTransition, isPending] = useTransition({
    timeoutMs: 1000,
  });
  const onClick = () => {
    startTransition(() => {
      update('2');
    });
  };
  return (
    <div>
      <div>First Name: {result.data.first_name}</div>
      <button type="button" onClick={onClick}>Refetch user 2</button>
      {isPending && 'Pending...'}
    </div>
  );
};

const fetchFunc = async userId => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();
const initialResult = prefetch(fetchFunc, '1');

const Main = () => {
  const [result, setResult] = useState(initialResult);
  const update = (id) => {
    setResult(refetch(result, id));
  };
  return <DisplayData result={result} update={update} />;
};

const App = () => (
  <Suspense fallback={<span>Loading...</span>}>
    <Main />
  </Suspense>
);

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

API

Suspendable

Type for suspendable result with special functions. Suspendable can throw a promise.

Type: any

prepare

Create a new suspendable result from fetchFunc. The result is mutable and can be run later just once. It will suspend forever unless run() is called.

This is an internal API. Prefer using prefetch/refetch.

Type: Prepare

Parameters

fetchFunc FetchFunc<Result, Input>
transformFunc TransformFunc<Input, Source>?

Examples

import { prepare } from 'react-suspense-fetch';

const fetchFunc = async (userId) => {
  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);
  return res.json();
};
const result = prepare(fetchFunc);

run

Run the prepared suspendable result.

This is an internal API. Prefer using prefetch/refetch.

Parameters

result Suspendable<Result, Input>
input Input

Examples

import { prepare, run } from 'react-suspense-fetch';

const fetchFunc = async (userId) => {
  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);
  return res.json();
};
const result = prepare(fetchFunc);
run(result, 1); // the result will be mutated.

prefetch

Create a new suspendable result and run fetchFunc immediately.

Type: Prefetch

Parameters

fetchFunc FetchFunc<Result, Input>
inputOrSource (Input | Source)
transformFunc TransformFunc<Input, Source>?

Examples

import { prefetch } from 'react-suspense-fetch';

const fetchFunc = async userId => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();
const result = prefetch(fetchFunc, 1);

refetch

Create a new suspendable result and from an existing suspendable result. It runs fetchFunc immediately.

Type: Refetch

Parameters

result Suspendable<Result, Input>
input Input

Examples

import { refetch } from 'react-suspense-fetch';

const result = ...; // created by prepare or prefetch
const newResult = refetch(result, 2);

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 04 05 06 07

Blogs

Diving Into React Suspense Render-as-You-Fetch for REST APIs