@rest-hooks/core

Making dynamic sites performant, scalable, simple to build with any API design.

📖Read The Docs  |  🏁Getting Started  |  🎮Demo

Simple TypeScript definition

class Article extends Entity {
  readonly id: number | undefined = undefined;
  readonly title: string = '';
  readonly body: string = '';

  pk() { return this.id; }
}

const ArticleEndpoint = {
  fetch: async ({ id }: { id: string }) => {
    return await (await fetch(`http://test.com/articles/${id}`)).json();
  },
  getFetchKey({ id }: { id: string }) {
    return `GET /articles/${userId}`;
  },
  schema: Article,
  type: 'read' as const,
}

One line data hookup

const article = useResource(ArticleEndpoint, { id });
return (
  <>
    <h2>{article.title}</h2>
    <p>{article.body}</p>
  </>
);

Mutation

const update = useFetcher(ArticleEndpoint);
return <ArticleForm onSubmit={data => update({ id }, data)} />;

And subscriptions

const price = useResource(PriceEndpoint, { symbol });
useSubscription(PriceEndpoint, { symbol });+
return price.value;

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

For the small price of 7kb gziped.    🏁Get started now

Features

• Strong Typescript types
• 🛌 React Suspense support
• ⛓️ React Concurrent mode compatible
• 🎣 Simple declarative API
• 💰 Normalized response configurable caching
• 💥 Tiny bundle footprint
• 🛑 Automatic overfetching elimination
• ✨ Optimistic updates
• 🧘 Flexible to fit any API design (one size fits all)
• 🌳 Tree-shakable (only use what you need)
• 🔁 Subscriptions
• ♻️ Optional redux integration
• 📙 Storybook mocking
• 📱 React Native support
• 🚯 Pluggable garbage collection policy

Special thanks

Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.