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

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

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 } 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