tanstack-db-patterns-betalisted
Install: claude install-skill smicolon/ai-kit
# TanStack DB Patterns (Beta)
> **Beta Library**: TanStack DB is in beta. APIs may change between versions.
TanStack DB provides a client-first reactive data store with optional sync to remote sources.
## Core Concepts
- **Collections**: Named groups of documents (like tables)
- **Documents**: Individual records with unique IDs
- **Queries**: Reactive queries that update when data changes
- **Transactions**: Atomic operations across multiple documents
- **Sync**: Optional sync to remote backends
## Basic Setup
```typescript
// lib/db.ts
import { createDB, createCollection } from '@tanstack/db'
// Define document types
interface Post {
id: string
title: string
content: string
authorId: string
published: boolean
createdAt: number
updatedAt: number
}
interface User {
id: string
name: string
email: string
}
// Create database
export const db = createDB({
collections: {
posts: createCollection<Post>(),
users: createCollection<User>(),
},
})
```
## CRUD Operations
### Create
```typescript
import { db } from '@/lib/db'
// Insert a single document
const newPost = await db.posts.insert({
id: crypto.randomUUID(),
title: 'My Post',
content: 'Post content...',
authorId: 'user-1',
published: false,
createdAt: Date.now(),
updatedAt: Date.now(),
})
// Insert multiple documents
await db.posts.insertMany([
{ id: '1', title: 'Post 1', ... },
{ id: '2', title: 'Post 2', ... },
])
```
### Read
```typescript
// Get by ID
const post =