Dynamic data at scale. Performance, consistency, typing for REST, proto, GraphQL, websockets and more.
Simple TypeScript definition
class ArticleResource extends Resource {
readonly id: string = '';
readonly title: string = '';
readonly body: string = '';
pk() { return this.id; }
static urlRoot = '/articles/';
}
One line data hookup
const article = useResource(ArticleResource.detail(), { id });
return (
<>
<h2>{article.title}</h2>
<p>{article.body}</p>
</>
);
Mutation
const update = useFetcher(ArticleResource.update());
return <ArticleForm onSubmit={data => update({ id }, data)} />;
And subscriptions
const price = useResource(PriceResource.detail(), { symbol });
useSubscription(PriceResource.detail(), { 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) -
๐ง Debugging and inspection via browser extension -
๐ณ Tree-shakable (only use what you need) -
๐ Subscriptions -
โป๏ธ Optional redux integration -
๐ Storybook mocking -
๐ฑ React Native support -
๐ฏ Declarative cache lifetime policy
Special thanks
Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.