Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
65 changes: 0 additions & 65 deletions .changeset/suspense-query-hook.md

This file was deleted.

7 changes: 7 additions & 0 deletions examples/react/paced-mutations-demo/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# @tanstack/db-example-paced-mutations-demo

## 0.0.5

### Patch Changes

- Updated dependencies [[`5b6437b`](https://github.com/TanStack/db/commit/5b6437b5c316740c77b7ab7ebd41565a375c7f2e)]:
- @tanstack/[email protected]

## 0.0.4

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/react/paced-mutations-demo/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@tanstack/db-example-paced-mutations-demo",
"version": "0.0.4",
"version": "0.0.5",
"private": true,
"type": "module",
"scripts": {
Expand Down
7 changes: 7 additions & 0 deletions examples/react/todo/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# examples/react/todo

## 0.1.21

### Patch Changes

- Updated dependencies [[`5b6437b`](https://github.com/TanStack/db/commit/5b6437b5c316740c77b7ab7ebd41565a375c7f2e)]:
- @tanstack/[email protected]

## 0.1.20

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/react/todo/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@tanstack/db-example-react-todo",
"private": true,
"version": "0.1.20",
"version": "0.1.21",
"dependencies": {
"@tanstack/electric-db-collection": "workspace:^",
"@tanstack/query-core": "^5.90.5",
Expand Down
63 changes: 63 additions & 0 deletions packages/react-db/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,68 @@
# @tanstack/react-db

## 0.1.41

### Patch Changes

- Add `useLiveSuspenseQuery` hook for React Suspense support ([#697](https://github.com/TanStack/db/pull/697))

Introduces a new `useLiveSuspenseQuery` hook that integrates with React Suspense and Error Boundaries, 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

**Documentation:**
- Comprehensive guide in live-queries.md covering usage patterns and when to use each hook
- Comparison with useLiveQuery showing different approaches to loading/error states
- Router loader pattern recommendation for React Router/TanStack Router users
- Error handling examples with Suspense and Error Boundaries

Resolves #692

## 0.1.40

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/react-db/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@tanstack/react-db",
"description": "React integration for @tanstack/db",
"version": "0.1.40",
"version": "0.1.41",
"author": "Kyle Mathews",
"license": "MIT",
"repository": {
Expand Down