Installation

1npm install --save @data-client/react @data-client/rest @data-client/test

For more details, see the Installation docs page.

Usage

Simple TypeScript definition

1class User extends Entity {
2  id = '';
3  username = '';
4}
5
6class Article extends Entity {
7  id = '';
8  title = '';
9  body = '';
10  author = User.fromJS();
11  createdAt = Temporal.Instant.fromEpochSeconds(0);
12
13  static schema = {
14    author: User,
15    createdAt: Temporal.Instant.from,
16  };
17}

Create collection of API Endpoints

1const UserResource = resource({
2  path: '/users/:id',
3  schema: User,
4  optimistic: true,
5});
6
7const ArticleResource = resource({
8  path: '/articles/:id',
9  schema: Article,
10  searchParams: {} as { author?: string },
11  optimistic: true,
12  paginationField: 'cursor',
13});

One line data binding

1const article = useSuspense(ArticleResource.get, { id });
2return (
3  <article>
4    <h2>
5      {article.title} by {article.author.username}
6    </h2>
7    <p>{article.body}</p>
8  </article>
9);

Reactive Mutations

1const ctrl = useController();
2return (
3  <>
4    <CreateArticleForm
5      onSubmit={article =>
6        ctrl.fetch(ArticleResource.getList.push, { id }, article)
7      }
8    />
9    <ProfileForm
10      onSubmit={user =>
11        ctrl.fetch(UserResource.update, { id: article.author.id }, user)
12      }
13    />
14    <button onClick={() => ctrl.fetch(ArticleResource.delete, { id })}>
15      Delete
16    </button>
17  </>
18);

Subscriptions

1const price = useLive(PriceResource.get, { symbol });
2return price.value;

Type-safe Imperative Actions

1const ctrl = useController();
2await ctrl.fetch(ArticleResource.update, { id }, articleData);
3await ctrl.fetchIfStale(ArticleResource.get, { id });
4ctrl.expireAll(ArticleResource.getList);
5ctrl.invalidate(ArticleResource.get, { id });
6ctrl.invalidateAll(ArticleResource.getList);
7ctrl.setResponse(ArticleResource.get, { id }, articleData);
8ctrl.set(Article, { id }, articleData);

Programmatic queries

1const queryTotalVotes = new schema.Query(
2  new schema.Collection([BlogPost]),
3  posts => posts.reduce((total, post) => total + post.votes, 0),
4);
5
6const totalVotes = useQuery(queryTotalVotes);
7const totalVotesForUser = useQuery(queryTotalVotes, { userId });

1const groupTodoByUser = new schema.Query(
2  TodoResource.getList.schema,
3  todos => Object.groupBy(todos, todo => todo.userId),
4);
5const todosByUser = useQuery(groupTodoByUser);

Powerful Middlewares

1class LoggingManager implements Manager {
2  middleware: Middleware = controller => next => async action => {
3    console.log('before', action, controller.getState());
4    await next(action);
5    console.log('after', action, controller.getState());
6  };
7
8  cleanup() {}
9}

1class TickerStream implements Manager {
2  middleware: Middleware = controller => {
3    this.handleMsg = msg => {
4      controller.set(Ticker, { id: msg.id }, msg);
5    };
6    return next => action => next(action);
7  };
8
9  init() {
10    this.websocket = new WebSocket('wss://ws-feed.myexchange.com');
11    this.websocket.onmessage = event => {
12      const msg = JSON.parse(event.data);
13      this.handleMsg(msg);
14    };
15  }
16  cleanup() {
17    this.websocket.close();
18  }
19}

Integrated data mocking

1const fixtures = [
2  {
3    endpoint: ArticleResource.getList,
4    args: [{ maxResults: 10 }] as const,
5    response: [
6      {
7        id: '5',
8        title: 'first post',
9        body: 'have a merry christmas',
10        author: { id: '10', username: 'bob' },
11        createdAt: new Date(0).toISOString(),
12      },
13      {
14        id: '532',
15        title: 'second post',
16        body: 'never again',
17        author: { id: '10', username: 'bob' },
18        createdAt: new Date(0).toISOString(),
19      },
20    ],
21  },
22  {
23    endpoint: ArticleResource.update,
24    response: ({ id }, body) => ({
25      ...body,
26      id,
27    }),
28  },
29];
30
31const Story = () => (
32  <MockResolver fixtures={options[result]}>
33    <ArticleList maxResults={10} />
34  </MockResolver>
35);

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

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

Features

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

Examples

• Todo: | |
• Github: |
• NextJS: | |
• Websockets: | |

API

Reactive Applications

• Rendering: useSuspense(), useLive(), useCache(), useDLE(), useQuery(), useLoading(), useDebounce(), useCancelling()

• Event handling: useController() returns Controller

  Method	Subject
  Fetch
  ctrl.fetch	Endpoint + Args
  ctrl.fetchIfStale	Endpoint + Args
  Expiry
  ctrl.expireAll	Endpoint
  ctrl.invalidate	Endpoint + Args
  ctrl.invalidateAll	Endpoint
  ctrl.resetEntireStore	Everything
  Set
  ctrl.set	Schema + Args
  ctrl.setResponse	Endpoint + Args
  ctrl.setError	Endpoint + Args
  ctrl.resolve	Endpoint + Args
  Subscription
  ctrl.subscribe	Endpoint + Args
  ctrl.unsubscribe	Endpoint + Args

• Components: <DataProvider/>, <AsyncBoundary/>, <ErrorBoundary/>, <MockResolver/>

• Data Mocking: Fixture, Interceptor, renderDataHook()

• Middleware: LogoutManager, NetworkManager, SubscriptionManager, PollingSubscription, DevToolsManager

Define Data

Networking definition

• Endpoints: RestEndpoint, GQLEndpoint
• Resources: resource(), hookifyResource()

Data model

Data Type	Mutable	Schema	Description	Queryable
Object	✅	Entity, EntityMixin	single unique object	✅
	✅	Union(Entity)	polymorphic objects (A | B)	✅
	🛑	Object	statically known keys	🛑
		Invalidate(Entity)	delete an entity	🛑
List	✅	Collection(Array)	growable lists	✅
	🛑	Array	immutable lists	🛑
	✅	All	list of all entities of a kind	✅
Map	✅	Collection(Values)	growable maps	✅
	🛑	Values	immutable maps	🛑
any		Query(Queryable)	memoized custom transforms	✅