Declarative Fetch component for React Suspense.
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.
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;
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>
Check out the example for more. It's running here.
Released under MIT license.
Copyright © 2018-present Ryan Florence