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

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

• <input checked="" disabled="" type="checkbox"> Strong Typescript inference
• <input checked="" disabled="" type="checkbox"> 🛌 React Suspense support
• <input checked="" disabled="" type="checkbox"> 🧵 React 18 Concurrent mode compatible
• <input checked="" disabled="" type="checkbox"> 💦 Partial Hydration Server Side Rendering
• <input checked="" disabled="" type="checkbox"> 🎣 Declarative API
• <input checked="" disabled="" type="checkbox"> 📝 Composition over configuration
• <input checked="" disabled="" type="checkbox"> 💰 Normalized caching
• <input checked="" disabled="" type="checkbox"> 💥 Tiny bundle footprint
• <input checked="" disabled="" type="checkbox"> 🛑 Automatic overfetching elimination
• <input checked="" disabled="" type="checkbox"> ✨ Optimistic updates
• <input checked="" disabled="" type="checkbox"> 🧘 Flexible to fit any API design (one size fits all)
• <input checked="" disabled="" type="checkbox"> 🔧 Debugging and inspection via browser extension
• <input checked="" disabled="" type="checkbox"> 🌳 Tree-shakable (only use what you need)
• <input checked="" disabled="" type="checkbox"> 🔁 Subscriptions
• <input checked="" disabled="" type="checkbox"> ♻️ Optional redux integration
• <input checked="" disabled="" type="checkbox"> 📙 Storybook mocking
• <input checked="" disabled="" type="checkbox"> 📱 React Native support
• <input checked="" disabled="" type="checkbox"> ⚛️ NextJS support
• <input checked="" disabled="" type="checkbox"> 🚯 Declarative cache lifetime policy
• <input checked="" disabled="" type="checkbox"> 🧅 Composable middlewares
• <input checked="" disabled="" type="checkbox"> 💽 Global data consistency guarantees
• <input checked="" disabled="" type="checkbox"> 🏇 Automatic race condition elimination
• <input checked="" disabled="" type="checkbox"> 👯 Global referential equality guarantees

Examples

• Todo: Source | Sandbox
• Github: Source | Sandbox
• NextJS: Source | Sandbox