Skip to content
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
722c1e2
Add comprehensive Suspense support research document
claude Oct 20, 2025
65d2ce6
Update Suspense research with React 18 compatibility
claude Oct 20, 2025
1b34458
feat: Add useLiveSuspenseQuery hook for React Suspense support
claude Oct 20, 2025
da4899f
chore: Remove example docs (will be added to official docs separately)
claude Oct 20, 2025
bd428fc
chore: Add changeset for useLiveSuspenseQuery
claude Oct 20, 2025
a67b7f7
chore: Remove research document (internal reference only)
claude Oct 20, 2025
36b5c06
style: Run prettier formatting
claude Oct 20, 2025
69238e8
refactor: Refactor useLiveSuspenseQuery to wrap useLiveQuery
claude Oct 20, 2025
d6bcaeb
fix: Change changeset to patch release (pre-v1)
claude Oct 20, 2025
50c261b
fix: Fix TypeScript error and lint warning in useLiveSuspenseQuery
claude Oct 20, 2025
16a2163
fix: Address critical Suspense lifecycle bugs from code review
claude Oct 20, 2025
ed66008
test: Fix failing tests in useLiveSuspenseQuery
claude Oct 20, 2025
85841c2
docs: Add useLiveSuspenseQuery documentation
claude Oct 20, 2025
db1dc7e
docs: Clarify Suspense/ErrorBoundary section is React-only
claude Oct 20, 2025
3905895
docs: Add router loader pattern recommendation
claude Oct 20, 2025
1dd7e22
docs: Use more neutral language for Suspense vs traditional patterns
claude Oct 20, 2025
32a2960
chore: Update changeset with documentation additions
claude Oct 20, 2025
e3cbce4
Merge origin/main into claude/research-db-suspense-011CUK3kMRXvivgb6a…
claude Oct 21, 2025
50e5aad
test: Add coverage for pre-created SingleResult and StrictMode
claude Oct 21, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions .changeset/suspense-query-hook.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
"@tanstack/react-db": minor
---

Add `useLiveSuspenseQuery` hook for React Suspense support

Introduces a new `useLiveSuspenseQuery` hook that provides declarative data loading with React Suspense, following TanStack Query's `useSuspenseQuery` pattern.

**Key features:**

- React 18+ compatible using the throw promise pattern
- Type-safe API with guaranteed data (never undefined)
- Automatic error handling via Error Boundaries
- Reactive updates after initial load via useSyncExternalStore
- Support for dependency-based re-suspension
- Works with query functions, config objects, and pre-created collections

**Example usage:**

```tsx
import { Suspense } from "react"
import { useLiveSuspenseQuery } from "@tanstack/react-db"

function TodoList() {
// Data is guaranteed to be defined - no isLoading needed
const { data } = useLiveSuspenseQuery((q) =>
q
.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
)

return (
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
)
}

function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
```

**Implementation details:**

- Throws promises when collection is loading (caught by Suspense)
- Throws errors when collection fails (caught by Error Boundary)
- Reuses promise across re-renders to prevent infinite loops
- Detects dependency changes and creates new collection/promise
- Same TypeScript overloads as useLiveQuery for consistency

Resolves #692
1 change: 1 addition & 0 deletions packages/react-db/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Re-export all public APIs
export * from "./useLiveQuery"
export * from "./useLiveSuspenseQuery"
export * from "./useLiveInfiniteQuery"

// Re-export everything from @tanstack/db
Expand Down
Loading
Loading