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
Installation
It's now recommended for new projects to use @rest-hooks/react directly.
npm install --save @rest-hooks/react @rest-hooks/test @rest-hooks/hooks @rest-hooks/rest
TypeScript definition
Simpleclass Article extends Entity {
readonly id: string = '';
readonly title: string = '';
readonly body: string = '';
pk() {
return this.id;
}
}
collection of API Endpoints
Createconst ArticleResource = createResource({
path: '/articles/:id',
schema: Article,
})
data binding
One lineconst 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
Andconst 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 8kb gziped.
Features
- [x]
Strong Typescript inference
- [x]
๐ React Suspense support - [x]
๐งต React 18 Concurrent mode compatible - [x]
๐ฆ Partial Hydration Server Side Rendering - [x]
๐ฃ Declarative API - [x]
๐ Composition over configuration - [x]
๐ฐ Normalized caching - [x]
๐ฅ Tiny bundle footprint - [x]
๐ Automatic overfetching elimination - [x]
โจ Optimistic updates - [x]
๐ง Flexible to fit any API design (one size fits all) - [x]
๐ง Debugging and inspection via browser extension - [x]
๐ณ Tree-shakable (only use what you need) - [x]
๐ Subscriptions - [x]
โป๏ธ Optional redux integration - [x]
๐ Storybook mocking - [x]
๐ฑ React Native support - [x]
โ๏ธ NextJS support - [x]
๐ฏ Declarative cache lifetime policy - [x]
๐ง Composable middlewares - [x]
๐ฝ Global data consistency guarantees - [x]
๐ Automatic race condition elimination - [x]
๐ฏ Global referential equality guarantees
Principals of Rest Hooks
Integrity
- Strong inferred types
- Global referential equality guarantees
- Normalized store creates a single source of truth
- Strong invariants robust against race conditions
- Validation
Performance
- Stale While Revalidate configurable cache
- Only re-render
Composition over configuration
- 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
Incremental Adoption
- Simple case is simple
- Scale as your app scales