Asynchronous dynamic data at scale. Performance, data integrity, and typing for REST, proto, GraphQL, websockets and more.
Bring structure to your React State.
🌎 Website
Simple TypeScript definition
class Article extends Entity {
readonly id: string = '';
readonly title: string = '';
readonly body: string = '';
pk() {
return this.id;
}
}Create collection of API Endpoints
const ArticleResource = createResource({
path: '/articles/:id',
schema: Article,
})One line data binding
const article = useSuspense(ArticleResource.get, { id });
return (
<>
<h2>{article.title}</h2>
<p>{article.body}</p>
</>
);const { fetch } = useController();
return (
<ArticleForm
onSubmit={data => fetch(ArticleResource.update, { id }, data)}
/>
);And subscriptions
const price = useSuspense(PriceResource.get, { symbol });
useSubscription(PriceResource.get, { symbol });
return price.value;For the small price of 8kb gziped. 🏁Get started now
-
Strong Typescript types
- 🛌 React Suspense support
- 🧵 React 18 Concurrent mode compatible
- 🎣 Declarative API
- 📝 Composition over configuration
- 💰 Normalized 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
- Strong inferred types
- Global referential equality guarantees
- Normalized store creates a single source of truth
- Strong invariants robust against race conditions
- Validation
- Stale While Revalidate configurable cache
- Only re-render
- Declarative data definitions
- Decoupled API definitions from usage
- Co-located data dependencies
- Centralized orchestration
- Extensible orchestration through Managers (middleware)
- Composable hooks
- subject pattern
- Suspense + concurrent mode async orchestration
- Simple case is simple
- Scale as your app scales
Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.