react-suspendable v0.1.0

Suspender

Not really meant for anything serious yet, and may never be.

This is a package that wraps async functions to be used with Suspense. You can see in the example folder how that looks.

Basic fetch

import { suspender } from 'react-suspender';

const getData = async type => {
  if (type === 'success') {
    let response = await fetch('https://test.com');
    let json = await response.json();
    return json;
  }
};

const initialRequest = suspender(getData, 'success');

const App = () => {
  let [user, setUser] = React.useState(initialRequest);
  return (
    <React.Suspense fallback={<div>sidebar loader...</div>}>
      <SomeComponent user={user} />
    </React.Suspense>
  );
};

Error Handling

See examples/src/TestContent.tsx. You can wrap your component in an error boundary, and then you will be able to render something if an async request throws a promise rejection

TypeScript example

type User = { name: string };
// initial request must be created outside the render, or else you will be in an infinite loop
const initialRequest = suspender < User > (getData, 'success');

const App = () => {
  let [user, setUser] = React.useState(initialRequest);
  return (
    <React.Suspense fallback={<div>sidebar loader...</div>}>
      <Sidebar user={user} />
    </React.Suspense>
  );
};

// Example using TS types with suspense
type SidebarProps = {
  user: Suspender<User>,
};

const Sidebar = ({ user }: SidebarProps) => {
  const { data } = user.read();
  // data is correctly typed using the User type above
  return null;
};