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 8kb gziped.
Features
-
Strong Typescript types
-
🛌 React Suspense support -
⛓️ React Concurrent mode compatible -
🎣 Simple declarative API -
💰 Normalized response configurable caching -
💥 Tiny bundle footprint -
🛑 Automatic overfetching elimination -
✨ Optimistic updates -
🧘 Flexible to fit any API design (one size fits all) -
🌳 Tree-shakable (only use what you need) -
🔁 Subscriptions -
♻️ Optional redux integration -
📙 Storybook mocking -
📱 React Native support -
🚯 Pluggable garbage collection policy
Special thanks
Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.