Update to Tanstack DB

[olliethedev]

Summary

Replace TanStack Query with TanStack DB across all plugins to leverage live queries and optimistic mutations. Currently blocked on TanStack DB supporting prefetching at the Hydration Boundary (required for SSR).

Motivation

TanStack DB provides:

• Live queries - Reactive updates when data changes without manual invalidation
• Optimistic mutations - Instant UI updates with automatic rollback on failure
• Client-first store - Query data however components need it, reducing custom endpoint logic
• Simplified cache management - No more manual invalidateQueries calls

Blocker

⏳ Waiting on: TanStack DB support for prefetching at the Hydration Boundary TanStack/db#709

Currently, our SSR loaders use queryClient.prefetchQuery() to populate the cache server-side before hydration. TanStack DB needs equivalent functionality for createCollection to work with SSR frameworks (Next.js, React Router, TanStack Start).

Affected Plugins

• blog - posts, tags, drafts
• cms - dynamic collections, entries
• ai-chat - conversations, messages
• form-builder - forms, submissions
• route-docs - documentation pages

Migration Scope

Current (TanStack Query)	New (TanStack DB)
createQueryKeys() factories	createCollection() with queryCollectionOptions
useSuspenseQuery() / useQuery()	useLiveQuery()
useMutation() + invalidateQueries()	collection.insert() / update() / delete()
queryClient.prefetchQuery() in loaders	Pending SSR hydration support

Example Migration

Before (blog posts):

const { data } = useSuspenseQuery(queries.posts.list());

After:

const postsCollection = createCollection(queryCollectionOptions({
  queryKey: ['posts'],
  queryFn: () => fetch('/api/posts').then(r => r.json()),
  getKey: (post) => post.id,
  onUpdate: async ({ transaction }) => { /* sync to server */ },
}));

const { data } = useLiveQuery((q) =>
  q.from({ post: postsCollection })
   .where(({ post }) => eq(post.published, true))
   .orderBy(({ post }) => post.createdAt, 'desc')
);

Tasks

• Monitor TanStack DB for SSR/hydration support
• Create migration guide for each plugin type
• Update AGENTS.md with TanStack DB patterns
• Migrate blog plugin (simplest, good first candidate)
• Migrate cms plugin (complex relations)
• Migrate ai-chat plugin (streaming considerations)
• Migrate form-builder plugin
• Update docs and examples

Resources

• TanStack DB Quick Start
• TanStack Query-DB Collection