TanStack/db: A reactive client store with sync.

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

Interesting! TanStack making a splash in the live syncing sphere, with an interesting approach:

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

With the following example usage in React:

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

They show off how the sync pieces can be built using ElectricSQL, basically running Postgres in WASM on your client with a version of the database hosted by them as well.

I don’t know when I’d actually reach for this at the moment, but I do think its really nice to have the option in the TanStack-verse to do this sort of thing.