Skip to content
A primitive library for React Suspense Render-as-You-Fetch
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
examples
src
.eslintrc.json
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json
webpack.config.js

README.md

react-suspense-fetch

Build Status npm version bundle size

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

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

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

You can’t perform that action at this time.