Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/TanStack/db below:

TanStack/db: A reactive client store for building super fast apps

A reactive client store for building super fast apps on sync

TanStack DB extends TanStack Query with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast 🔥

Enjoy this library? Try the entire TanStack, including TanStack Query, TanStack Store, etc.

TanStack DB gives you robust support for real-time sync, live queries and local writes. With no stale data, super fast re-rendering and sub-millisecond cross-collection queries — even for large complex apps.

Built on a TypeScript implementation of differential dataflow (#), TanStack DB gives you:

• 🔥 a blazing fast query engine
  for sub-millisecond live queries — even for complex queries with joins and aggregates
• 🎯 fine-grained reactivity
  to minimize component re-rendering
• 💪 robust transaction primitives
  for easy optimistic mutations with sync and lifecycle support
• 🌟 normalized data
  to keep your backend simple

TanStack DB is backend agnostic and incrementally adoptable:

• plug in any backend: sync engines, REST APIs, GraphQL, polling, custom sources
• builds on TanStack Store, works with and alongside TanStack Query

Sync data into collections:

import { createCollection, QueryClient } from "@tanstack/react-db"
import { queryCollectionOptions } from "@tanstack/query-db-collection"

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ["todos"],
    queryFn: async () => fetch("/api/todos"),
    queryClient: new QueryClient(),
    getKey: (item) => item.id,
    schema: todoSchema, // any standard schema
  })
)

Use live queries in your components:

import { useLiveQuery } from "@tanstack/react-db"
import { eq } from "@tanstack/db"

const Todos = () => {
  const { data: todos } = useLiveQuery((query) =>
    query
      .from({ todos: todoCollection })
      .where(({ todos }) => eq(todos.completed, false))
  )

  return <List items={todos} />
}

Apply mutations with local optimistic state:

// Define collection with persistence handlers
const todoCollection = createCollection({
  id: "todos",
  // ... other config
  onInsert: async ({ transaction }) => {
    const modified = transaction.mutations[0].modified
    await api.todos.create(modified)
  },
})

// Then use collection operators in your components
const AddTodo = () => {
  return (
    <Button
      onClick={() =>
        todoCollection.insert({
          id: uuid(),
          text: "🔥 Make app faster",
          completed: false,
        })
      }
    />
  )
}

See the Usage guide for more details, including how to do:

• real-time sync
• cross-collection queries
• fine-grained reactivity
• different strategies for data loading and handling mutations

There's also an example React todo app and usage examples in the package tests.

• typed sets of objects that can mirror a backend table or be populated with a filtered view or result set, such as pendingTodos or decemberNewTodos
• collections are just JavaScript data — load them on demand and define as many as you need

• run reactively against and across collections with support for joins, filters and aggregates
• powered by differential dataflow: query results update incrementally, not by re-running the whole query

• batch and stage local changes across collections with immediate application of local optimistic updates
• sync transactions to the backend with automatic rollbacks and management of optimistic state

TanStack DB provides several collection types to support different backend integrations:

• @tanstack/db - Core collection functionality with local-only and local-storage collections for offline-first applications
• @tanstack/query-db-collection - Collections backed by TanStack Query for REST APIs and GraphQL endpoints
• @tanstack/electric-db-collection - Real-time sync collections powered by ElectricSQL for live database synchronization
• @tanstack/trailbase-db-collection - Collections for TrailBase backend integration

TanStack DB integrates with React & Vue with more on the way!

• @tanstack/react-db - React hooks and components for using TanStack DB collections in React applications
• @tanstack/vue-db - Vue composables for using TanStack DB collections in Vue applications

npm install @tanstack/react-db
# Optional: for specific collection types
npm install @tanstack/electric-db-collection @tanstack/query-db-collection

Other framework integrations are in progress.

How is this different from TanStack Query?
TanStack DB builds on top of TanStack Query. Use Query to fetch data; use DB to manage reactive local collections and mutations. They complement each other.

Do I need a sync engine like ElectricSQL?
No. TanStack DB is designed to work with sync engines like Electric but also works with any backend: polling APIs, GraphQL, REST, or custom sync logic.

What is a Collection? Is it like a DB table?
Kind of. Collections are typed sets of objects, but they can also be filtered views or custom groupings. They're just JavaScript structures that you define and manage.

Is this an ORM? Do queries hit my backend?
No. TanStack DB is not an ORM. Queries run entirely in the client against local collections. The framework provides strong primitives to manage how data is loaded and synced.

Tanstack DB is currently in BETA. See the release post for more details.

View the contributing guidelines here.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4