react-suspense-fetch

React Suspense Render-as-You-Fetch pattern for REST APIs.

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 } from 'react-suspense-fetch';

const DisplayData = ({ result, refetch }) => {
  const [startTransition, isPending] = useTransition({
    timeoutMs: 1000,
  });
  const onClick = () => {
    startTransition(() => {
      refetch('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 refetch = (id) => {
    setResult(prefetch(fetchFunc, id));
  };
  return <DisplayData result={result} refetch={refetch} />;
};

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

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

API

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.

Type: Prepare

Parameters

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

Examples

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

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

run

Run the prepared suspendable result.

Parameters

  • result Prepared<Result, Input>
  • input Input

Examples

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

const fetchFunc = async userId => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).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);

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

GitHub