Skip to content

Conversation

@github-actions
Copy link
Contributor

@github-actions github-actions bot commented Nov 4, 2025

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@tanstack/[email protected]

Patch Changes

  • Add useLiveSuspenseQuery hook for React Suspense support (#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:

    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 Support suspense in React #692

@tanstack/[email protected]

Patch Changes

@tanstack/[email protected]

Patch Changes

@KyleAMathews KyleAMathews merged commit 2985ab8 into main Nov 4, 2025
@KyleAMathews KyleAMathews deleted the changeset-release/main branch November 4, 2025 23:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support suspense in React

2 participants