@data-client/redux

Asynchronous mutable data at scale. Performance, data integrity, and typing for REST, proto, GraphQL, websockets and more..

📖Read The Docs  |  🏁Getting Started  |  🎮Todo Demo  |  🎮Github Demo

Simple TypeScript definition

class Article extends Entity {
  readonly id: string = '';
  readonly title: string = '';
  readonly body: string = '';

  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)}
  />
);

And subscriptions

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

Programmatic queries

const sortedArticles = new schema.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 = useQuery(sortedArticles);
const articlesAscending = useQuery(sortedArticles, { asc: true });
const articlesDescending = useQuery(sortedArticles, { asc: false });

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

🏁Get started now

Features

• Strong Typescript types
• 🛌 React Suspense support
• 🧵 React 18 Concurrent mode compatible
• 🎣 Declarative API
• 📝 Composition over configuration
• 💰 Normalized caching
• 💥 Tiny bundle footprint
• 🛑 Automatic overfetching elimination
• ✨ 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
• 🚯 Declarative cache lifetime policy

Principals of Data Client

Integrity

• Strong inferred types
• Global referential equality guarantees
• Normalized store creates a single source of truth
• Strong invariants robust against race conditions
• Validation

Performance

• Stale While Revalidate configurable cache
• Only re-render

Composition over configuration

• Declarative data definitions
• Decoupled API definitions from usage
• Co-located data dependencies
  • Centralized orchestration
• Extensible orchestration through Managers (middleware)
• Composable hooks
  • subject pattern
• Suspense + concurrent mode async orchestration

Incremental Adoption

• Simple case is simple
• Scale as your app scales