the-real-astro / rest-hooks Goto Github PK

This project forked from reactive/data-client

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

License: Apache License 2.0

Shell 0.09% JavaScript 10.64% TypeScript 87.11% CSS 1.38% MDX 0.78%

rest-hooks's Introduction

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

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

For more details, see the Installation docs page.

Usage

Simple TypeScript definition

class User extends Entity {
  id = '';
  username = '';

  pk() {
    return this.id;
  }
}

class Article extends Entity {
  id = '';
  title = '';
  body = '';
  author = User.fromJS();

  pk() {
    return this.id;
  }

  static schema = {
    author: User,
  }
}

Create collection of API Endpoints

const UserResource = createResource({
  path: '/users/:id',
  schema: User,
});

const ArticleResource = createResource({
  path: '/articles/:id',
  schema: Article,
});

One line data binding

const article = useSuspense(ArticleResource.get, { id });
return (
  <>
    <h2>{article.title} by {article.author.username}</h2>
    <p>{article.body}</p>
  </>
);

Reactive Mutations

const ctrl = useController();
return (
  <ProfileForm
    onSubmit={data => ctrl.fetch(UserResource.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 });