The scalable way to build applications with [dynamic data](https://dataclient.io/docs/getting-started/mutations). [Declarative resouce definitons](https://dataclient.io/docs/getting-started/resource) for [REST](https://dataclient.io/rest), [GraphQL](https://dataclient.io/graphql), [Websockets+SSE](https://dataclient.io/docs/concepts/managers#data-stream) and [more](https://dataclient.io/rest/api/Endpoint)
[Performant rendering](https://dataclient.io/docs/getting-started/data-dependency) in React, NextJS, React Native, ExpoGo Schema driven. Zero updater functions. [](https://circleci.com/gh/reactive/data-client) [](https://app.codecov.io/gh/reactive/data-client?branch=master) [](https://github.com/reactive/data-client/issues 'Percentage of issues still open') [](https://bundlephobia.com/result?p=@data-client/react) [](https://www.npmjs.com/package/@data-client/react) [](http://makeapullrequest.com) [](https://discord.gg/35nb8Mz) **[📖Read The Docs](https://dataclient.io/docs)**  |  [🏁Getting Started](https://dataclient.io/docs/getting-started/installation)
🎮 Demos:   [Todo](https://stackblitz.com/github/reactive/data-client/tree/master/examples/todo-app?file=src%2Fpages%2FHome%2FTodoList.tsx)  |  [Github Social](https://stackblitz.com/github/reactive/data-client/tree/master/examples/github-app?file=src%2Fpages%2FIssueList.tsx)  |  [NextJS SSR](https://stackblitz.com/github/reactive/data-client/tree/master/examples/nextjs?file=components%2Ftodo%2FTodoList.tsx)  |  [Websockets+SSR](https://stackblitz.com/github/reactive/coin-app/tree/master?file=src%2Fresources%2FStreamManager.ts,src%2Fapp%2FCurrencyList.tsx)

Installation

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

For more details, see the Installation docs page.

Usage

Simple TypeScript definition

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

class Article extends Entity {
  id = '';
  title = '';
  body = '';
  author = User.fromJS();
  createdAt = Temporal.Instant.fromEpochSeconds(0);

  static schema = {
    author: User,
    createdAt: Temporal.Instant.from,
  };
}

Create collection of API Endpoints

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

const ArticleResource = resource({
  path: '/articles/:id',
  schema: Article,
  searchParams: {} as { author?: string },
  optimistic: true,
  paginationField: 'cursor',
});

One line data binding

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

Reactive Mutations

const ctrl = useController();
return (
  <>
    <CreateArticleForm
      onSubmit={article =>
        ctrl.fetch(ArticleResource.getList.push, { id }, article)
      }
    />
    <ProfileForm
      onSubmit={user =>
        ctrl.fetch(UserResource.update, { id: article.author.id }, user)
      }
    />
    <button onClick={() => ctrl.fetch(ArticleResource.delete, { id })}>
      Delete
    </button>
  </>
);

Subscriptions

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

Type-safe Imperative Actions

const ctrl = useController();
await ctrl.fetch(ArticleResource.update, { id }, articleData);
await ctrl.fetchIfStale(ArticleResource.get, { id });
ctrl.expireAll(ArticleResource.getList);
ctrl.invalidate(ArticleResource.get, { id });
ctrl.invalidateAll(ArticleResource.getList);
ctrl.setResponse(ArticleResource.get, { id }, articleData);
ctrl.set(Article, { id }, articleData);

Programmatic queries

const queryTotalVotes = new schema.Query(
  new schema.Collection([BlogPost]),
  posts => posts.reduce((total, post) => total + post.votes, 0),
);

const totalVotes = useQuery(queryTotalVotes);
const totalVotesForUser = useQuery(queryTotalVotes, { userId });

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

Powerful Middlewares

class LoggingManager implements Manager {
  middleware: Middleware = controller => next => async action => {
    console.log('before', action, controller.getState());
    await next(action);
    console.log('after', action, controller.getState());
  };

  cleanup() {}
}

class TickerStream implements Manager {
  middleware: Middleware = controller => {
    this.handleMsg = msg => {
      controller.set(Ticker, { id: msg.id }, msg);
    };
    return next => action => next(action);
  };

  init() {
    this.websocket = new WebSocket('wss://ws-feed.myexchange.com');
    this.websocket.onmessage = event => {
      const msg = JSON.parse(event.data);
      this.handleMsg(msg);
    };
  }
  cleanup() {
    this.websocket.close();
  }
}

Integrated data mocking

const fixtures = [
  {
    endpoint: ArticleResource.getList,
    args: [{ maxResults: 10 }] as const,
    response: [
      {
        id: '5',
        title: 'first post',
        body: 'have a merry christmas',
        author: { id: '10', username: 'bob' },
        createdAt: new Date(0).toISOString(),
      },
      {
        id: '532',
        title: 'second post',
        body: 'never again',
        author: { id: '10', username: 'bob' },
        createdAt: new Date(0).toISOString(),
      },
    ],
  },
  {
    endpoint: ArticleResource.update,
    response: ({ id }, body) => ({
      ...body,
      id,
    }),
  },
];

const Story = () => (
  <MockResolver fixtures={options[result]}>
    <ArticleList maxResults={10} />
  </MockResolver>
);

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

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

Features

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