Skip to content

data-client/rest-hooks

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
d0951f3 1

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 21, 2023 13:33
March 9, 2023 16:22
January 22, 2023 12:56

🛌🎣 Rest hooks

CircleCI Coverage Status npm downloads bundle size npm version PRs Welcome Chat

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

Installation

npm install @rest-hooks/react @rest-hooks/rest @rest-hooks/test

For more details, see the Installation docs page.

Usage

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