fetch's Introduction

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!

Also, this may totally not be at all what React has in mind for these APIs, so don't get too excited, just have some fun.

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