Rest Hooks

Normalized state management for async data. Safe. Fast. Reusable.

Data fetchingGraphQLCaching
data-client/rest-hooksresthooks.io@rest-hooks/react

README

Rest hooks


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


🌎 Website




📖Read The Docs  |  🏁Getting Started  | 
🎮Todo Demo  | 
🎮Github Demo  | 
🎮NextJS SSR Demo


Installation


  1. ```bash
  2. npm install @rest-hooks/react @rest-hooks/rest @rest-hooks/test
  3. ```

For more details, see the Installation docs page.

Usage


Simple TypeScript definition


  1. ```typescript
  2. class User extends Entity {
  3.   id = '';
  4.   username = '';

  6.   pk() {
  7.     return this.id;
  8.   }
  9. }

  11. class Article extends Entity {
  12.   id = '';
  13.   title = '';
  14.   body = '';
  15.   author = User.fromJS();

  17.   pk() {
  18.     return this.id;
  19.   }

  21.   static schema = {
  22.     author: User,
  23.   }
  24. }
  25. ```

Create collection of API Endpoints


  1. ```typescript
  2. const UserResource = createResource({
  3.   path: '/users/:id',
  4.   schema: User,
  5. });

  7. const ArticleResource = createResource({
  8.   path: '/articles/:id',
  9.   schema: Article,
  10. });
  11. ```

One line data binding


  1. ```tsx
  2. const article = useSuspense(ArticleResource.get, { id });
  3. return (
  4.   <>
  5.     <h2>{article.title} by {article.author.username}</h2>
  6.     <p>{article.body}</p>
  7.   </>
  8. );
  9. ```

Reactive Mutations


  1. ```tsx
  2. const ctrl = useController();
  3. return (
  4.   <ProfileForm
  5.     onSubmit={data => ctrl.fetch(UserResource.update, { id }, data)}
  6.   />
  7. );
  8. ```

Subscriptions


  1. ```tsx
  2. const price = useLive(PriceResource.get, { symbol });
  3. return price.value;
  4. ```

Programmatic queries


  1. ```tsx
  2. const sortedArticles = new Query(
  3.   new schema.All(Article),
  4.   (entries, { asc } = { asc: false }) => {
  5.     const sorted = [...entries].sort((a, b) => a.title.localeCompare(b.title));
  6.     if (asc) return sorted;
  7.     return sorted.reverse();
  8.   }
  9. );

  11. const articlesUnsorted = useCache(sortedArticles);
  12. const articlesAscending = useCache(sortedArticles, { asc: true });
  13. const articlesDescending = useCache(sortedArticles, { asc: false });
  14. ```


...all typed ...fast ...and consistent


For the small price of 9kb gziped.    🏁Get started now
| 🥊Comparison

Features


- [x] TS 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

Examples


- Todo: Source | Sandbox
- Github: Source | Sandbox
- NextJS: Source | Sandbox