diff --git a/.changeset/suspense-query-hook.md b/.changeset/suspense-query-hook.md deleted file mode 100644 index a64315e54..000000000 --- a/.changeset/suspense-query-hook.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -"@tanstack/react-db": patch ---- - -Add `useLiveSuspenseQuery` hook for React Suspense support - -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 ( - - ) -} - -function App() { - return ( - Loading...}> - - - ) -} -``` - -**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 diff --git a/examples/react/paced-mutations-demo/CHANGELOG.md b/examples/react/paced-mutations-demo/CHANGELOG.md index 6814786fa..9f06de293 100644 --- a/examples/react/paced-mutations-demo/CHANGELOG.md +++ b/examples/react/paced-mutations-demo/CHANGELOG.md @@ -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/react-db@0.1.41 + ## 0.0.4 ### Patch Changes diff --git a/examples/react/paced-mutations-demo/package.json b/examples/react/paced-mutations-demo/package.json index 5f0258518..15d6b5b17 100644 --- a/examples/react/paced-mutations-demo/package.json +++ b/examples/react/paced-mutations-demo/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/db-example-paced-mutations-demo", - "version": "0.0.4", + "version": "0.0.5", "private": true, "type": "module", "scripts": { diff --git a/examples/react/todo/CHANGELOG.md b/examples/react/todo/CHANGELOG.md index c7d17ed75..2dde0ac2f 100644 --- a/examples/react/todo/CHANGELOG.md +++ b/examples/react/todo/CHANGELOG.md @@ -1,5 +1,12 @@ # examples/react/todo +## 0.1.21 + +### Patch Changes + +- Updated dependencies [[`5b6437b`](https://github.com/TanStack/db/commit/5b6437b5c316740c77b7ab7ebd41565a375c7f2e)]: + - @tanstack/react-db@0.1.41 + ## 0.1.20 ### Patch Changes diff --git a/examples/react/todo/package.json b/examples/react/todo/package.json index d923593e2..f40f9128c 100644 --- a/examples/react/todo/package.json +++ b/examples/react/todo/package.json @@ -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", diff --git a/packages/react-db/CHANGELOG.md b/packages/react-db/CHANGELOG.md index 045dd5d4e..580ce5028 100644 --- a/packages/react-db/CHANGELOG.md +++ b/packages/react-db/CHANGELOG.md @@ -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 ( + + ) + } + + function App() { + return ( + Loading...}> + + + ) + } + ``` + + **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 diff --git a/packages/react-db/package.json b/packages/react-db/package.json index 1f6a3eebd..58f542528 100644 --- a/packages/react-db/package.json +++ b/packages/react-db/package.json @@ -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": {