@rest-hooks/react
TypeScript icon, indicating that this package has built-in type declarations

8.2.2 • Public • Published

🛌🎣 Rest hooks

CircleCI Coverage Status npm downloads bundle size npm version PRs Welcome

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

Examples

Package Sidebar

Install

npm i @rest-hooks/react

Homepage

resthooks.io

Weekly Downloads

525

Version

8.2.2

License

Apache-2.0

Unpacked Size

20.6 kB

Total Files

12

Last publish

Collaborators

  • ntucker
  • ljharb