@rest-hooks/react v8.2.2
Define your async methods. Use them synchronously in React. Instantly mutate the data and automatically update all usages.
For REST, GraphQL, Websockets+SSE and more
📖Read The Docs | 🏁Getting Started | 🎮Todo Demo | 🎮Github Demo | 🎮NextJS SSR Demo
Installation
npm install @rest-hooks/react @rest-hooks/rest @rest-hooks/test
For more details, see the Installation docs page.
Simple TypeScript definition
class Article extends Entity {
id = '';
title = '';
body = '';
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>
</>
);
Mutation
const ctrl = useController();
return (
<ArticleForm
onSubmit={data => ctrl.fetch(ArticleResource.update, { id }, data)}
/>
);
Subscriptions
const price = useLive(PriceResource.get, { symbol });
return price.value;
Programmatic queries
const sortedArticles = new Query(
new schema.All(Article),
(entries, { asc } = { asc: false }) => {
const sorted = [...entries].sort((a, b) => a.title.localeCompare(b.title));
if (asc) return sorted;
return sorted.reverse();
}
);
const articlesUnsorted = useCache(sortedArticles);
const articlesAscending = useCache(sortedArticles, { asc: true });
const articlesDescending = useCache(sortedArticles, { asc: false });
...all typed ...fast ...and consistent
For the small price of 9kb gziped. 🏁Get started now | 🥊Comparison
Features
- Strong Typescript inference
- 🛌 React Suspense support
- 🧵 React 18 Concurrent mode compatible
- 💦 Partial Hydration Server Side Rendering
- 🎣 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
- ⚛️ NextJS support
- 🚯 Declarative cache lifetime policy
- 🧅 Composable middlewares
- 💽 Global data consistency guarantees
- 🏇 Automatic race condition elimination
- 👯 Global referential equality guarantees
Examples
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago