Web
Local-First Architecture
TanStack DB, sync collections, and live queries for local-first data.
TanStack DB
TanStack DB provides local-first data with automatic server synchronization:
import { useLiveQuery } from "@tanstack/react-query";
// Automatically syncs with server
const contacts = useLiveQuery(
db.contacts.findMany(),
[],
{ dbName: "crm" }
);Sync Collections
Generated from @repo/crm-schema via @repo/client-core:
pnpm gen:collectionsThis creates collection files in src/collections/:
// collections/contacts.ts
export const contactsCollection = createCollection({
name: "contacts",
schema: ContactSchema,
sync: { server: "/api/contacts" },
});Offline Support
- Data stored in IndexedDB
- Queries work offline
- Sync resumes when online
Optimistic Updates
const mutation = useMutation({
onMutate: async (newContact) => {
// Cancel outgoing refetches
await queryClient.cancelQueries(["contacts"]);
// Optimistically update
queryClient.setQueryData(["contacts"], (old) => [
...old,
{ id: "temp", ...newContact },
]);
},
});