(
+ trailBaseCollectionOptions({
+ id: 'todos',
+ recordApi: trailBaseClient.records('todos'),
+ getKey: (item) => item.id,
+ schema: todoSchema,
+ parse: {
+ created_at: (ts) => new Date(ts * 1000),
+ },
+ serialize: {
+ created_at: (date) => Math.floor(date.valueOf() / 1000),
+ },
+ onInsert: async ({ transaction }) => {
+ const newTodo = transaction.mutations[0].modified
+ console.log('Todo created:', newTodo)
+ },
+ })
+)
+
+// Use in component
+function TodoList() {
+ const { data: todos } = useLiveQuery((q) =>
+ q.from({ todo: todosCollection })
+ .where(({ todo }) => !todo.completed)
+ .orderBy(({ todo }) => todo.created_at, 'desc')
+ )
+
+ const addTodo = (text: string) => {
+ todosCollection.insert({
+ id: crypto.randomUUID(),
+ text,
+ completed: false,
+ created_at: new Date(),
+ })
+ }
+
+ return (
+
+ {todos.map((todo) => (
+
{todo.text}
+ ))}
+
Loading...
+ } @else {
+
+ @for (todo of query.data(); track todo.id) {
+ - {{ todo.text }}
+ }
+
+ }
+ `
+})
+export class TodoListComponent {
+ query = injectLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+}
+```
+
+**Note:** All return values (`data`, `isLoading`, `status`, etc.) are Angular signals, so call them with `()` in your template: `query.data()`, `query.isLoading()`.
+
+> **Template Syntax:** Examples use Angular 17+ control flow (`@if`, `@for`). For Angular 16, use `*ngIf` and `*ngFor` instead.
+
+### Reactive Parameters
+
+For queries that depend on reactive values, use the `params` option to re-run the query when those values change:
+
+```typescript
+import { Component, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { gt } from '@tanstack/db'
+
+@Component({
+ selector: 'app-filtered-todos',
+ standalone: true,
+ template: `
+ {{ query.data().length }} high-priority todos
+ `
+})
+export class FilteredTodosComponent {
+ minPriority = signal(5)
+
+ query = injectLiveQuery({
+ params: () => ({ minPriority: this.minPriority() }),
+ query: ({ params, q }) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, params.minPriority))
+ })
+}
+```
+
+#### When to Use Reactive Parameters
+
+Use the reactive `params` option when your query depends on:
+- Component signals
+- Input properties
+- Computed values
+- Other reactive state
+
+When any reactive value accessed in the `params` function changes, the query is recreated and re-executed.
+
+#### What Happens When Parameters Change
+
+When a parameter value changes:
+1. The previous live-query collection is disposed
+2. A new query is created with the updated parameter values
+3. `status()`/`isLoading()` reflect the new query's lifecycle
+4. `data()` updates automatically when the new results arrive
+
+#### Best Practices
+
+**Use reactive params for dynamic queries:**
+
+```typescript
+import { Component, Input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+ selector: 'app-todo-list',
+ standalone: true,
+ template: `{{ query.data().length }} todos
`
+})
+export class TodoListComponent {
+ // Angular 16+ compatible input
+ @Input({ required: true }) userId!: number
+ status = signal('active')
+
+ // Good - reactive params track all dependencies
+ query = injectLiveQuery({
+ params: () => ({
+ userId: this.userId,
+ status: this.status()
+ }),
+ query: ({ params, q }) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => and(
+ eq(todos.userId, params.userId),
+ eq(todos.status, params.status)
+ ))
+ })
+}
+```
+
+**Using Angular 17+ signal inputs:**
+
+```typescript
+import { Component, input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+ selector: 'app-todo-list',
+ standalone: true,
+ template: `{{ query.data().length }} todos
`
+})
+export class TodoListComponent {
+ // Angular 17+ signal-based input
+ userId = input.required()
+ status = signal('active')
+
+ query = injectLiveQuery({
+ params: () => ({
+ userId: this.userId(),
+ status: this.status()
+ }),
+ query: ({ params, q }) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => and(
+ eq(todos.userId, params.userId),
+ eq(todos.status, params.status)
+ ))
+ })
+}
+```
+
+**Static queries don't need params:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+
+@Component({
+ selector: 'app-all-todos',
+ standalone: true,
+ template: `{{ query.data().length }} todos
`
+})
+export class AllTodosComponent {
+ // No reactive dependencies - query never changes
+ query = injectLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ )
+}
+```
+
+**Access multiple signals in template:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq } from '@tanstack/db'
+
+@Component({
+ selector: 'app-todos',
+ standalone: true,
+ template: `
+ Status: {{ query.status() }}
+ Loading: {{ query.isLoading() }}
+ Ready: {{ query.isReady() }}
+ Total: {{ query.data().length }}
+ `
+})
+export class TodosComponent {
+ query = injectLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ )
+}
+```
diff --git a/docs/framework/angular/reference/functions/injectLiveQuery.md b/docs/framework/angular/reference/functions/injectLiveQuery.md
new file mode 100644
index 000000000..4b3209aca
--- /dev/null
+++ b/docs/framework/angular/reference/functions/injectLiveQuery.md
@@ -0,0 +1,120 @@
+---
+id: injectLiveQuery
+title: injectLiveQuery
+---
+
+# Function: injectLiveQuery()
+
+## Call Signature
+
+```ts
+function injectLiveQuery(options): InjectLiveQueryResult<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
+```
+
+Defined in: [index.ts:51](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L51)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+#### TParams
+
+`TParams` *extends* `unknown`
+
+### Parameters
+
+#### options
+
+##### params
+
+() => `TParams`
+
+##### query
+
+(`args`) => `QueryBuilder`\<`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](../../interfaces/InjectLiveQueryResult.md)\<\{ \[K in string \| number \| symbol\]: (TContext\["result"\] extends object ? any\[any\] : TContext\["hasJoins"\] extends true ? TContext\["schema"\] : TContext\["schema"\]\[TContext\["fromSourceName"\]\])\[K\] \}\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery(queryFn): InjectLiveQueryResult<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
+```
+
+Defined in: [index.ts:61](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L61)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\<`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](../../interfaces/InjectLiveQueryResult.md)\<\{ \[K in string \| number \| symbol\]: (TContext\["result"\] extends object ? any\[any\] : TContext\["hasJoins"\] extends true ? TContext\["schema"\] : TContext\["schema"\]\[TContext\["fromSourceName"\]\])\[K\] \}\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery(config): InjectLiveQueryResult<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
+```
+
+Defined in: [index.ts:64](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L64)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\<`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](../../interfaces/InjectLiveQueryResult.md)\<\{ \[K in string \| number \| symbol\]: (TContext\["result"\] extends object ? any\[any\] : TContext\["hasJoins"\] extends true ? TContext\["schema"\] : TContext\["schema"\]\[TContext\["fromSourceName"\]\])\[K\] \}\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery(liveQueryCollection): InjectLiveQueryResult;
+```
+
+Defined in: [index.ts:67](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L67)
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](../../interfaces/InjectLiveQueryResult.md)\<`TResult`, `TKey`, `TUtils`\>
diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md
new file mode 100644
index 000000000..3dfb77c21
--- /dev/null
+++ b/docs/framework/angular/reference/index.md
@@ -0,0 +1,14 @@
+---
+id: "@tanstack/angular-db"
+title: "@tanstack/angular-db"
+---
+
+# @tanstack/angular-db
+
+## Interfaces
+
+- [InjectLiveQueryResult](../interfaces/InjectLiveQueryResult.md)
+
+## Functions
+
+- [injectLiveQuery](../functions/injectLiveQuery.md)
diff --git a/docs/framework/angular/reference/interfaces/InjectLiveQueryResult.md b/docs/framework/angular/reference/interfaces/InjectLiveQueryResult.md
new file mode 100644
index 000000000..aa45218bc
--- /dev/null
+++ b/docs/framework/angular/reference/interfaces/InjectLiveQueryResult.md
@@ -0,0 +1,134 @@
+---
+id: InjectLiveQueryResult
+title: InjectLiveQueryResult
+---
+
+# Interface: InjectLiveQueryResult\
+
+Defined in: [index.ts:26](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L26)
+
+The result of calling `injectLiveQuery`.
+Contains reactive signals for the query state and data.
+
+## Type Parameters
+
+### TResult
+
+`TResult` *extends* `object` = `any`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\> = \{
+\}
+
+## Properties
+
+### collection
+
+```ts
+collection: Signal, TResult>>;
+```
+
+Defined in: [index.ts:36](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L36)
+
+A signal containing the underlying collection instance
+
+***
+
+### data
+
+```ts
+data: Signal;
+```
+
+Defined in: [index.ts:34](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L34)
+
+A signal containing the results as an array
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: Signal;
+```
+
+Defined in: [index.ts:48](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L48)
+
+A signal indicating whether the collection has been cleaned up
+
+***
+
+### isError
+
+```ts
+isError: Signal;
+```
+
+Defined in: [index.ts:46](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L46)
+
+A signal indicating whether the collection has an error
+
+***
+
+### isIdle
+
+```ts
+isIdle: Signal;
+```
+
+Defined in: [index.ts:44](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L44)
+
+A signal indicating whether the collection is idle
+
+***
+
+### isLoading
+
+```ts
+isLoading: Signal;
+```
+
+Defined in: [index.ts:40](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L40)
+
+A signal indicating whether the collection is currently loading
+
+***
+
+### isReady
+
+```ts
+isReady: Signal;
+```
+
+Defined in: [index.ts:42](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L42)
+
+A signal indicating whether the collection is ready
+
+***
+
+### state
+
+```ts
+state: Signal>;
+```
+
+Defined in: [index.ts:32](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L32)
+
+A signal containing the complete state map of results keyed by their ID
+
+***
+
+### status
+
+```ts
+status: Signal;
+```
+
+Defined in: [index.ts:38](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L38)
+
+A signal containing the current status of the collection
diff --git a/docs/framework/react/adapter.md b/docs/framework/react/adapter.md
deleted file mode 100644
index 7a3b17c60..000000000
--- a/docs/framework/react/adapter.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: TanStack DB React Adapter
-id: adapter
----
-
-## Installation
-
-```sh
-npm install @tanstack/react-db
-```
-
-## React Hooks
-
-See the [React Functions Reference](../reference/index.md) to see the full list of hooks available in the React Adapter.
-
-## Basic Usage
diff --git a/docs/framework/react/overview.md b/docs/framework/react/overview.md
new file mode 100644
index 000000000..0e53916f9
--- /dev/null
+++ b/docs/framework/react/overview.md
@@ -0,0 +1,163 @@
+---
+title: TanStack DB React Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/react-db
+```
+
+## React Hooks
+
+See the [React Functions Reference](../reference/index.md) to see the full list of hooks available in the React Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](../../guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` hook creates a live query that automatically updates your component when data changes:
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+
+function TodoList() {
+ const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+
+ if (isLoading) return Loading...
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+```
+
+### Dependency Arrays
+
+All query hooks (`useLiveQuery`, `useLiveInfiniteQuery`, `useLiveSuspenseQuery`) accept an optional dependency array as their last parameter. This array works similarly to React's `useEffect` dependencies - when any value in the array changes, the query is recreated and re-executed.
+
+#### When to Use Dependency Arrays
+
+Use dependency arrays when your query depends on external reactive values (props, state, or other hooks):
+
+```tsx
+function FilteredTodos({ minPriority }: { minPriority: number }) {
+ const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+ )
+
+ return {data.length} high-priority todos
+}
+```
+
+#### What Happens When Dependencies Change
+
+When a dependency value changes:
+1. The previous live query collection is cleaned up
+2. A new query is created with the updated values
+3. The component re-renders with the new data
+4. The hook suspends (for `useLiveSuspenseQuery`) or shows loading state
+
+#### Best Practices
+
+**Include all external values used in the query:**
+
+```tsx
+// Good - all external values in deps
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => and(
+ eq(todos.userId, userId),
+ eq(todos.status, status)
+ )),
+ [userId, status]
+)
+
+// Bad - missing dependencies
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.userId, userId)),
+ [] // Missing userId!
+)
+```
+
+**Empty array for static queries:**
+
+```tsx
+// No external dependencies - query never changes
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection }),
+ []
+)
+```
+
+**Omit the array for queries with no external dependencies:**
+
+```tsx
+// Same as above - no deps needed
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+)
+```
+
+### useLiveInfiniteQuery
+
+For paginated data with live updates, use `useLiveInfiniteQuery`:
+
+```tsx
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+ (q) => q
+ .from({ posts: postsCollection })
+ .where(({ posts }) => eq(posts.category, category))
+ .orderBy(({ posts }) => posts.createdAt, 'desc'),
+ {
+ pageSize: 20,
+ getNextPageParam: (lastPage, allPages) =>
+ lastPage.length === 20 ? allPages.length : undefined
+ },
+ [category] // Re-run when category changes
+)
+```
+
+**Note:** The dependency array is only available when using the query function variant, not when passing a pre-created collection.
+
+### useLiveSuspenseQuery
+
+For React Suspense integration, use `useLiveSuspenseQuery`:
+
+```tsx
+function TodoList({ filter }: { filter: string }) {
+ const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.filter, filter)),
+ [filter] // Re-suspends when filter changes
+ )
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+
+function App() {
+ return (
+ Loading...}>
+
+
+ )
+}
+```
+
+When dependencies change, `useLiveSuspenseQuery` will re-suspend, showing your Suspense fallback until the new data is ready.
diff --git a/docs/framework/react/reference/functions/useLiveInfiniteQuery.md b/docs/framework/react/reference/functions/useLiveInfiniteQuery.md
new file mode 100644
index 000000000..49f258cf6
--- /dev/null
+++ b/docs/framework/react/reference/functions/useLiveInfiniteQuery.md
@@ -0,0 +1,217 @@
+---
+id: useLiveInfiniteQuery
+title: useLiveInfiniteQuery
+---
+
+# Function: useLiveInfiniteQuery()
+
+## Call Signature
+
+```ts
+function useLiveInfiniteQuery(liveQueryCollection, config): UseLiveInfiniteQueryReturn;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:113](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L113)
+
+Create an infinite query using a query function with live updates
+
+Uses `utils.setWindow()` to dynamically adjust the limit/offset window
+without recreating the live query collection on each page change.
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+#### config
+
+[`UseLiveInfiniteQueryConfig`](../../type-aliases/UseLiveInfiniteQueryConfig.md)\<`any`\>
+
+Configuration including pageSize and getNextPageParam
+
+### Returns
+
+[`UseLiveInfiniteQueryReturn`](../../type-aliases/UseLiveInfiniteQueryReturn.md)\<`any`\>
+
+Object with pages, data, and pagination controls
+
+### Examples
+
+```ts
+// Basic infinite query
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+ (q) => q
+ .from({ posts: postsCollection })
+ .orderBy(({ posts }) => posts.createdAt, 'desc')
+ .select(({ posts }) => ({
+ id: posts.id,
+ title: posts.title
+ })),
+ {
+ pageSize: 20,
+ getNextPageParam: (lastPage, allPages) =>
+ lastPage.length === 20 ? allPages.length : undefined
+ }
+)
+```
+
+```ts
+// With dependencies
+const { pages, fetchNextPage } = useLiveInfiniteQuery(
+ (q) => q
+ .from({ posts: postsCollection })
+ .where(({ posts }) => eq(posts.category, category))
+ .orderBy(({ posts }) => posts.createdAt, 'desc'),
+ {
+ pageSize: 10,
+ getNextPageParam: (lastPage) =>
+ lastPage.length === 10 ? lastPage.length : undefined
+ },
+ [category]
+)
+```
+
+```ts
+// Router loader pattern with pre-created collection
+// In loader:
+const postsQuery = createLiveQueryCollection({
+ query: (q) => q
+ .from({ posts: postsCollection })
+ .orderBy(({ posts }) => posts.createdAt, 'desc')
+ .limit(20)
+})
+await postsQuery.preload()
+return { postsQuery }
+
+// In component:
+const { postsQuery } = useLoaderData()
+const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+ postsQuery,
+ {
+ pageSize: 20,
+ getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
+ }
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveInfiniteQuery(
+ queryFn,
+ config,
+deps?): UseLiveInfiniteQueryReturn;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:123](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L123)
+
+Create an infinite query using a query function with live updates
+
+Uses `utils.setWindow()` to dynamically adjust the limit/offset window
+without recreating the live query collection on each page change.
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\<`TContext`\>
+
+Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.
+
+#### config
+
+[`UseLiveInfiniteQueryConfig`](../../type-aliases/UseLiveInfiniteQueryConfig.md)\<`TContext`\>
+
+Configuration including pageSize and getNextPageParam
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveInfiniteQueryReturn`](../../type-aliases/UseLiveInfiniteQueryReturn.md)\<`TContext`\>
+
+Object with pages, data, and pagination controls
+
+### Examples
+
+```ts
+// Basic infinite query
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+ (q) => q
+ .from({ posts: postsCollection })
+ .orderBy(({ posts }) => posts.createdAt, 'desc')
+ .select(({ posts }) => ({
+ id: posts.id,
+ title: posts.title
+ })),
+ {
+ pageSize: 20,
+ getNextPageParam: (lastPage, allPages) =>
+ lastPage.length === 20 ? allPages.length : undefined
+ }
+)
+```
+
+```ts
+// With dependencies
+const { pages, fetchNextPage } = useLiveInfiniteQuery(
+ (q) => q
+ .from({ posts: postsCollection })
+ .where(({ posts }) => eq(posts.category, category))
+ .orderBy(({ posts }) => posts.createdAt, 'desc'),
+ {
+ pageSize: 10,
+ getNextPageParam: (lastPage) =>
+ lastPage.length === 10 ? lastPage.length : undefined
+ },
+ [category]
+)
+```
+
+```ts
+// Router loader pattern with pre-created collection
+// In loader:
+const postsQuery = createLiveQueryCollection({
+ query: (q) => q
+ .from({ posts: postsCollection })
+ .orderBy(({ posts }) => posts.createdAt, 'desc')
+ .limit(20)
+})
+await postsQuery.preload()
+return { postsQuery }
+
+// In component:
+const { postsQuery } = useLoaderData()
+const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+ postsQuery,
+ {
+ pageSize: 20,
+ getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
+ }
+)
+```
diff --git a/docs/framework/react/reference/functions/useLiveQuery.md b/docs/framework/react/reference/functions/useLiveQuery.md
new file mode 100644
index 000000000..84162b674
--- /dev/null
+++ b/docs/framework/react/reference/functions/useLiveQuery.md
@@ -0,0 +1,1251 @@
+---
+id: useLiveQuery
+title: useLiveQuery
+---
+
+# Function: useLiveQuery()
+
+## Call Signature
+
+```ts
+function useLiveQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:84](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L84)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\<`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:101](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L101)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\<`TContext`\> \| `null` \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection:
+ | Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}, StandardSchemaV1, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
+ | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state:
+ | Map
+ | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:120](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L120)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) =>
+ \| `LiveQueryCollectionConfig`\<`TContext`, \{ \[K in string \| number \| symbol\]: (TContext\["result"\] extends object ? any\[any\] : TContext\["hasJoins"\] extends true ? TContext\["schema"\] : TContext\["schema"\]\[TContext\["fromSourceName"\]\])\[K\] \} & `object`\>
+ \| `null`
+ \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection:
+ | Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}, StandardSchemaV1, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
+ | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state:
+ | Map
+ | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:139](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L139)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### queryFn
+
+(`q`) =>
+ \| `Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\>
+ \| `null`
+ \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection:
+ | Collection, TResult>
+ | undefined;
+```
+
+#### data
+
+```ts
+data: TResult[] | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:162](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L162)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### queryFn
+
+(`q`) =>
+ \| `QueryBuilder`\<`TContext`\>
+ \| `LiveQueryCollectionConfig`\<`TContext`, \{ \[K in string \| number \| symbol\]: (TContext\["result"\] extends object ? any\[any\] : TContext\["hasJoins"\] extends true ? TContext\["schema"\] : TContext\["schema"\]\[TContext\["fromSourceName"\]\])\[K\] \} & `object`\>
+ \| `Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\>
+ \| `null`
+ \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection:
+ | Collection, TResult>
+ | Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}, StandardSchemaV1, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
+ | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType | TResult[] | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state:
+ | Map
+ | Map
+ | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(config, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:230](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L230)
+
+Create a live query using configuration object
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\<`TContext`\>
+
+Configuration object with query and options
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic config object usage
+const { data, status } = useLiveQuery({
+ query: (q) => q.from({ todos: todosCollection }),
+ gcTime: 60000
+})
+```
+
+```ts
+// With query builder and options
+const queryBuilder = new Query()
+ .from({ persons: collection })
+ .where(({ persons }) => gt(persons.age, 30))
+ .select(({ persons }) => ({ id: persons.id, name: persons.name }))
+
+const { data, isReady } = useLiveQuery({ query: queryBuilder })
+```
+
+```ts
+// Handle all states uniformly
+const { data, isLoading, isReady, isError } = useLiveQuery({
+ query: (q) => q.from({ items: itemCollection })
+})
+
+if (isLoading) return Loading...
+if (isError) return Something went wrong
+if (!isReady) return Preparing...
+
+return {data.length} items loaded
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(liveQueryCollection): object;
+```
+
+Defined in: [useLiveQuery.ts:276](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L276)
+
+Subscribe to an existing live query collection
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+Pre-created live query collection to subscribe to
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection;
+```
+
+#### data
+
+```ts
+data: TResult[];
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Using pre-created live query collection
+const myLiveQuery = createLiveQueryCollection((q) =>
+ q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
+)
+const { data, collection } = useLiveQuery(myLiveQuery)
+```
+
+```ts
+// Access collection methods directly
+const { data, collection, isReady } = useLiveQuery(existingCollection)
+
+// Use collection for mutations
+const handleToggle = (id) => {
+ collection.update(id, draft => { draft.completed = !draft.completed })
+}
+```
+
+```ts
+// Handle states consistently
+const { data, isLoading, isError } = useLiveQuery(sharedCollection)
+
+if (isLoading) return Loading...
+if (isError) return Error loading data
+
+return {data.map(item =>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery(liveQueryCollection): object;
+```
+
+Defined in: [useLiveQuery.ts:296](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L296)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\> & `SingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection, TResult> & SingleResult;
+```
+
+#### data
+
+```ts
+data: TResult | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+ q.from({ issues: issueCollection })
+ .join({ persons: personCollection }, ({ issues, persons }) =>
+ eq(issues.userId, persons.id)
+ )
+ .select(({ issues, persons }) => ({
+ id: issues.id,
+ title: issues.title,
+ userName: persons.name
+ }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+ q.from({ todos: todoCollection })
+)
+
+if (isLoading) return Loading...
+if (isError) return Error: {status}
+
+return (
+
+ {data.map(todo => - {todo.text}
)}
+
+)
+```
diff --git a/docs/framework/react/reference/functions/useLiveSuspenseQuery.md b/docs/framework/react/reference/functions/useLiveSuspenseQuery.md
new file mode 100644
index 000000000..679fb98fd
--- /dev/null
+++ b/docs/framework/react/reference/functions/useLiveSuspenseQuery.md
@@ -0,0 +1,490 @@
+---
+id: useLiveSuspenseQuery
+title: useLiveSuspenseQuery
+---
+
+# Function: useLiveSuspenseQuery()
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery(queryFn, deps?): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:76](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L76)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\<`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+ const { data } = useLiveSuspenseQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+
+function App() {
+ return (
+ Loading...}>
+
+
+ )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+ return (
+ Error loading data}>
+ Loading...}>
+
+
+
+ )
+}
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery(config, deps?): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:86](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L86)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\<`TContext`\>
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+ const { data } = useLiveSuspenseQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+
+function App() {
+ return (
+ Loading...}>
+
+
+ )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+ return (
+ Error loading data}>
+ Loading...}>
+
+
+
+ )
+}
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery(liveQueryCollection): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:96](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L96)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection;
+```
+
+#### data
+
+```ts
+data: TResult[];
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+ const { data } = useLiveSuspenseQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+
+function App() {
+ return (
+ Loading...}>
+
+
+ )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+ return (
+ Error loading data}>
+ Loading...}>
+
+
+
+ )
+}
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery(liveQueryCollection): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:109](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L109)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\<`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\<`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\<`unknown`, `unknown`\>, `TResult`\> & `SingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection, TResult> & SingleResult;
+```
+
+#### data
+
+```ts
+data: TResult | undefined;
+```
+
+#### state
+
+```ts
+state: Map;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+ const { data } = useLiveSuspenseQuery((q) =>
+ q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.completed, false))
+ .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+ )
+
+ return (
+
+ {data.map(todo => - {todo.text}
)}
+
+ )
+}
+
+function App() {
+ return (
+ Loading...}>
+
+
+ )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => eq(todos.id, 1))
+ .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+ (q) => q.from({ todos: todosCollection })
+ .where(({ todos }) => gt(todos.priority, minPriority)),
+ [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+ return (
+ Error loading data}>
+ Loading...}>
+
+
+
+ )
+}
+```
diff --git a/docs/framework/react/reference/functions/usePacedMutations.md b/docs/framework/react/reference/functions/usePacedMutations.md
new file mode 100644
index 000000000..4f50b0411
--- /dev/null
+++ b/docs/framework/react/reference/functions/usePacedMutations.md
@@ -0,0 +1,131 @@
+---
+id: usePacedMutations
+title: usePacedMutations
+---
+
+# Function: usePacedMutations()
+
+```ts
+function usePacedMutations(config): (variables) => Transaction;
+```
+
+Defined in: [usePacedMutations.ts:93](https://github.com/TanStack/db/blob/main/packages/react-db/src/usePacedMutations.ts#L93)
+
+React hook for managing paced mutations with timing strategies.
+
+Provides optimistic mutations with pluggable strategies like debouncing,
+queuing, or throttling. The optimistic updates are applied immediately via
+`onMutate`, and the actual persistence is controlled by the strategy.
+
+## Type Parameters
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### T
+
+`T` *extends* `object` = `Record`\<`string`, `unknown`\>
+
+## Parameters
+
+### config
+
+`PacedMutationsConfig`\<`TVariables`, `T`\>
+
+Configuration including onMutate, mutationFn and strategy
+
+## Returns
+
+A mutate function that accepts variables and returns Transaction objects
+
+```ts
+(variables): Transaction;
+```
+
+### Parameters
+
+#### variables
+
+`TVariables`
+
+### Returns
+
+`Transaction`\<`T`\>
+
+## Examples
+
+```tsx
+// Debounced auto-save
+function AutoSaveForm({ formId }: { formId: string }) {
+ const mutate = usePacedMutations({
+ onMutate: (value) => {
+ // Apply optimistic update immediately
+ formCollection.update(formId, draft => {
+ draft.content = value
+ })
+ },
+ mutationFn: async ({ transaction }) => {
+ await api.save(transaction.mutations)
+ },
+ strategy: debounceStrategy({ wait: 500 })
+ })
+
+ const handleChange = async (value: string) => {
+ const tx = mutate(value)
+
+ // Optional: await persistence or handle errors
+ try {
+ await tx.isPersisted.promise
+ console.log('Saved!')
+ } catch (error) {
+ console.error('Save failed:', error)
+ }
+ }
+
+ return 
-
- 
-
- 
-
- 
-
- 
-
- 
-