Reactions Fetch

Declarative Fetch component for React Suspense.

🚨 EXPERIMENTAL 🚨

Ayyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

So this is totally experimental. The React API's this component uses are unstable and will change. We’re all still learning what they even mean! But that doesn't mean we can't play around with them and figure out how to make them even better. So come along, but beware!

Installation

npm install @reactions/fetch
# or
yarn add @reactions/fetch

And then import it:

// using es modules
import Component from "@reactions/fetch";

// common.js
const Component = require("@reactions/fetch");

// AMD
// I've forgotten but it should work.

Or use script tags and globals.

<script src="https://unpkg.com/@reactions/fetch"></script>

And then grab it off the global like so:

const Component = ReactionsFetch;

How To

Reading and invalidating a path:

<Fetch path="https://api.gitub.com/gists">
  {({ data, invalidate }) => (
    <div>
      <button onClick={invalidate}>Refresh</button>
      <ul>{data.map(gist => <li>{gist.description}</li>)}</ul>
    </div>
  )}
</Fetch>

Optimistically updating a path.

<Fetch path="/projects">
  {({ data, set, invalidate }) => (
    <ul>
      {data.map(item => (
        <li>
          {item.title}{" "}
          <button
            onClick={async () => {
              set(items.filter(alleged => alleged.id !== item.id));
              const res = await fetch(`/todos/${item.id}`, {
                method: "delete"
              });
              if (!res.ok) {
                alert(`Failed to delete ${item.id}`);
                invalidate(); // refetches from source
              }
            }}
            aria-label="delete"
          >
            ⨉
          </button>
        </li>
      ))}
    </ul>
  )}
</Fetch>

Check out the example for more. It's running here.

Legal

Released under MIT license.

Copyright © 2018-present Ryan Florence