dataclient.io Open in urlscan Pro
2606:4700:3037::ac43:ade4  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to main content
If you like Reactive Data Client, give it a ⭐️ on GitHub

Reactive Data ClientDocsHooksRESTGraphQLNews
SearchK

Star1,853Get Started


REACTIVE MUTATIONS

Render data with useSuspense(). Then mutate with Controller.fetch().

This updates all usages atomically and immediately with zero additional fetches.
Reactive Data Client automatically ensures data consistency and integrity
globally including even the most challenging race conditions.

Editor
REST
GraphQL
Resources
PostItem
ProfileEdit
PostList
i










i










import { UserResource } from './resources';

export default function ProfileEdit({ userId }: { userId: number }) {
  const user = useSuspense(UserResource.get, { id: userId });
  const controller = useController();
  const handleChange = e =>
    controller.fetch(
      UserResource.partialUpdate,
      { id: userId },
      { name: e.currentTarget.value },
    );
  return (
    <div>
      <label>
        Name:{' '}
        <input
          type="text"
          value={user.name}
          onChange={handleChange}
        />
      </label>
    </div>
  );
}










i










🔴 Live Preview
Name:


SUNT AUT FACERE REPELLAT PROVIDENT OCCAECATI EXCEPTURI OPTIO REPREHENDERIT

by Leanne Graham

QUI EST ESSE

by Leanne Graham

EA MOLESTIAS QUASI EXERCITATIONEM REPELLAT QUI IPSA SIT AUT

by Leanne Graham

EUM ET EST OCCAECATI

by Leanne Graham
Store▶
Editor
REST
GraphQL
Resources
PostItem
ProfileEdit
PostList
i










i










i










i










🔴 Live Preview
Name:


SUNT AUT FACERE REPELLAT PROVIDENT OCCAECATI EXCEPTURI OPTIO REPREHENDERIT

by Leanne Graham

QUI EST ESSE

by Leanne Graham

EA MOLESTIAS QUASI EXERCITATIONEM REPELLAT QUI IPSA SIT AUT

by Leanne Graham

EUM ET EST OCCAECATI

by Leanne Graham
Store▶


STRUCTURED DATA

Data consistency, performance, and typesafety scale even as your data becomes
more complex.

Creates and deletes reactively update the correct lists, even when those lists
are nested inside other objects.

Model even the most complex data with polymorphic and unbounded object/maps
support.

Editor
REST
Resources
TodoItem
NewTodo
TodoList
UserList
i










i










import { TodoResource } from './resources';

export default function NewTodo({ userId }: { userId: number }) {
  const controller = useController();
  const handleKeyDown = async e => {
    if (e.key === 'Enter') {
      controller.fetch(TodoResource.getList.push, {
        userId,
        title: e.currentTarget.value,
      });
      e.currentTarget.value = '';
    }
  };
  return (
    <div className="listItem nogap">
      <label>
        <input type="checkbox" name="new" checked={false} disabled />
        <input type="text" onKeyDown={handleKeyDown} />
      </label>
      <CancelButton />
    </div>
  );
}










i










i










🔴 Live Preview

LEANNE GRAHAM'S TASKS

delectus aut autem

quis ut nam facilis et officia qui

fugiat veniam minus

 

ERVIN HOWELL'S TASKS

suscipit repellat esse quibusdam voluptatem incidunt

distinctio vitae autem nihil ut molestias quo

et itaque necessitatibus maxime molestiae qui quas velit

 
Store▶


LIVE UPDATES

Keep remote changes in sync with useLive().

Polling, SSE and Websocket or support a custom protocol with middlewares

Editor
Polling
Resources
AssetPrice
AssetList
i










import { getTicker } from './resources';

export default function AssetPrice({ symbol }: Props) {
  const productId = `${symbol}-USD`;
  const ticker = useLive(getTicker, { productId });
  return (
    <tr>
      <th>{symbol}</th>
      <td>
        <Formatted value={ticker.price} formatter="currency" />
      </td>
    </tr>
  );
}

interface Props {
  symbol: string;
}










i










🔴 Live Preview

BTC$37,115.99ETH$2,010.09DOGE$0.08

Store▶


DATA INTEGRITY

Strong inferred types; single source of truth that is referentially stable
ensures consistency; asynchronous invariants make it easy to avoid race
conditions


PERFORMANCE

Normalized cache means data is often ready before it is even needed. Automatic
request deduplication means less data to send over the network.


COMPOSITION OVER CONFIGURATION

Declare what you need where you need it. Share data definitions across
platforms, components, protocols, and behaviors.


INCREMENTAL ADOPTION

Get started fast with one line data definition and one line data binding. Then
add TypeScript, normalized cache with Schemas, optimistic updates and more.

More Demos

Get Started
Docs
 * Introduction
 * REST
 * GraphQL
 * Images / Binary
 * Websockets+SSE
 * Hooks

Community
 * Discord
 * Stack Overflow
 * Twitter
 * Bug Report

More
 * Blog
 * Github
 * Demo (Github)
 * Demo (Todo)
 * Demo (NextJS)

Copyright © 2023 Nathaniel Tucker. Some icons by Freepik