Making dynamic sites performant, scalable, simple to build with any API design.
Simple TypeScript definition
class ArticleResource extends Resource {
readonly id: number | undefined = undefined;
readonly title: string = '';
readonly body: string = '';
pk() { return this.id; }
static urlRoot = '/articles/';
}
One line data hookup
const article = useResource(ArticleResource.detailShape(), { id });
return (
<>
<h2>{article.title}</h2>
<p>{article.body}</p>
</>
);
Mutation
const update = useFetcher(ArticleResource.updateShape());
return <ArticleForm onSubmit={data => update({ id }, data)} />;
And subscriptions
const price = useResource(PriceResource.detailShape(), { symbol });
useSubscription(PriceResource.detailShape(), { symbol });
return price.value;
...all typed ...fast ...and consistent
For the small price of 7kb gziped.
Features
- [x] Strong Typescript types
- [x]
🛌 React Suspense support - [x]
⛓️ React Concurrent mode compatible - [x]
🎣 Simple declarative API - [x]
💰 Normalized response configurable caching - [x]
💥 Tiny bundle footprint - [x]
🛑 Automatic overfetching elimination - [x]
✨ Optimistic updates - [x]
🧘 Flexible to fit any API design (one size fits all) - [x]
🌳 Tree-shakable (only use what you need) - [x]
🔁 Subscriptions - [x]
♻️ Optional redux integration - [x]
📙 Storybook mocking - [x]
📱 React Native support - [ ]
🚯 Pluggable garbage collection policy
Special thanks
Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.