refactor: Refactor useLiveSuspenseQuery to wrap useLiveQuery

Simplified implementation by reusing useLiveQuery internally instead of
duplicating all collection management logic. This follows the same pattern
as TanStack Query's useBaseQuery.

Changes:
- useLiveSuspenseQuery now wraps useLiveQuery and adds Suspense logic
- Reduced code from ~350 lines to ~165 lines by eliminating duplication
- Only difference is the Suspense logic (throwing promises/errors)
- All tests still pass

Benefits:
- Easier to maintain - changes to collection logic happen in one place
- Consistent behavior between useLiveQuery and useLiveSuspenseQuery
- Cleaner separation of concerns

Also fixed lint errors:
- Remove unused imports (vi, useState)
- Fix variable shadowing in test

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

packages/react-db/src/useLiveSuspenseQuery.ts

@@ -1,12 +1,7 @@
-import { useRef, useSyncExternalStore } from "react"
-import {
-  BaseQueryBuilder,
-  CollectionImpl,
-  createLiveQueryCollection,
-} from "@tanstack/db"
+import { useRef } from "react"
+import { useLiveQuery } from "./useLiveQuery"
 import type {
   Collection,
-  CollectionConfigSingleRowOption,
   Context,
   GetResult,
   InferResultType,
@@ -17,8 +12,6 @@ import type {
   SingleResult,
 } from "@tanstack/db"
 
-const DEFAULT_GC_TIME_MS = 1 // Live queries created by useLiveSuspenseQuery are cleaned up immediately (0 disables GC)
-
 /**
  * Create a live query with React Suspense support
  * @param queryFn - Query function that defines what data to fetch
@@ -125,228 +118,48 @@ export function useLiveSuspenseQuery<
   collection: Collection<TResult, TKey, TUtils> & SingleResult
 }
 
-// Implementation - uses function overloads to infer the actual collection type
+// Implementation - uses useLiveQuery internally and adds Suspense logic
 export function useLiveSuspenseQuery(
   configOrQueryOrCollection: any,
   deps: Array<unknown> = []
 ) {
-  // Check if it's already a collection by checking for specific collection methods
-  const isCollection =
-    configOrQueryOrCollection &&
-    typeof configOrQueryOrCollection === `object` &&
-    typeof configOrQueryOrCollection.subscribeChanges === `function` &&
-    typeof configOrQueryOrCollection.startSyncImmediate === `function` &&
-    typeof configOrQueryOrCollection.id === `string`
-
-  // Use refs to cache collection and track dependencies
-  const collectionRef = useRef<Collection<object, string | number, {}> | null>(
-    null
-  )
-  const depsRef = useRef<Array<unknown> | null>(null)
-  const configRef = useRef<unknown>(null)
   const promiseRef = useRef<Promise<void> | null>(null)
 
-  // Use refs to track version and memoized snapshot
-  const versionRef = useRef(0)
-  const snapshotRef = useRef<{
-    collection: Collection<object, string | number, {}>
-    version: number
-  } | null>(null)
-
-  // Check if we need to create/recreate the collection
-  const needsNewCollection =
-    !collectionRef.current ||
-    (isCollection && configRef.current !== configOrQueryOrCollection) ||
-    (!isCollection &&
-      (depsRef.current === null ||
-        depsRef.current.length !== deps.length ||
-        depsRef.current.some((dep, i) => dep !== deps[i])))
-
-  if (needsNewCollection) {
-    // Reset promise for new collection
-    promiseRef.current = null
-
-    if (isCollection) {
-      // It's already a collection, ensure sync is started for React hooks
-      configOrQueryOrCollection.startSyncImmediate()
-      collectionRef.current = configOrQueryOrCollection
-      configRef.current = configOrQueryOrCollection
-    } else {
-      // Handle different callback return types
-      if (typeof configOrQueryOrCollection === `function`) {
-        // Call the function with a query builder to see what it returns
-        const queryBuilder = new BaseQueryBuilder() as InitialQueryBuilder
-        const result = configOrQueryOrCollection(queryBuilder)
+  // Use useLiveQuery to handle collection management and reactivity
+  const result = useLiveQuery(configOrQueryOrCollection, deps)
 
-        if (result === undefined || result === null) {
-          // Suspense queries cannot be disabled - throw error
-          throw new Error(
-            `useLiveSuspenseQuery does not support returning undefined/null from query function. Use useLiveQuery instead for conditional queries.`
-          )
-        } else if (result instanceof CollectionImpl) {
-          // Callback returned a Collection instance - use it directly
-          result.startSyncImmediate()
-          collectionRef.current = result
-        } else if (result instanceof BaseQueryBuilder) {
-          // Callback returned QueryBuilder - create live query collection using the original callback
-          collectionRef.current = createLiveQueryCollection({
-            query: configOrQueryOrCollection,
-            startSync: true,
-            gcTime: DEFAULT_GC_TIME_MS,
-          })
-        } else if (result && typeof result === `object`) {
-          // Assume it's a LiveQueryCollectionConfig
-          collectionRef.current = createLiveQueryCollection({
-            startSync: true,
-            gcTime: DEFAULT_GC_TIME_MS,
-            ...result,
-          })
-        } else {
-          // Unexpected return type
-          throw new Error(
-            `useLiveSuspenseQuery callback must return a QueryBuilder, LiveQueryCollectionConfig, or Collection. Got: ${typeof result}`
-          )
-        }
-        depsRef.current = [...deps]
-      } else {
-        // Config object
-        collectionRef.current = createLiveQueryCollection({
-          startSync: true,
-          gcTime: DEFAULT_GC_TIME_MS,
-          ...configOrQueryOrCollection,
-        })
-        depsRef.current = [...deps]
-      }
-    }
-  }
-
-  // Reset refs when collection changes
-  if (needsNewCollection) {
-    versionRef.current = 0
-    snapshotRef.current = null
+  // SUSPENSE LOGIC: Throw promise or error based on collection status
+  if (result.status === `disabled`) {
+    // Suspense queries cannot be disabled - throw error
+    throw new Error(
+      `useLiveSuspenseQuery does not support disabled queries. Use useLiveQuery instead for conditional queries.`
+    )
   }
 
-  const collection = collectionRef.current!
-
-  // SUSPENSE LOGIC: Throw promise or error based on collection status
-  if (collection.status === `error`) {
+  if (result.status === `error`) {
     // Clear promise and throw error to Error Boundary
     promiseRef.current = null
-    throw new Error(`Collection "${collection.id}" failed to load`)
+    throw new Error(`Collection "${result.collection.id}" failed to load`)
   }
 
-  if (collection.status === `loading` || collection.status === `idle`) {
+  if (result.status === `loading` || result.status === `idle`) {
     // Create or reuse promise
     if (!promiseRef.current) {
-      promiseRef.current = collection.preload()
+      promiseRef.current = result.collection.preload()
     }
     // THROW PROMISE - React Suspense catches this (React 18+ compatible)
     throw promiseRef.current
   }
 
   // Collection is ready - clear promise
-  if (collection.status === `ready`) {
+  if (result.status === `ready`) {
     promiseRef.current = null
   }
 
-  // Create stable subscribe function using ref
-  const subscribeRef = useRef<
-    ((onStoreChange: () => void) => () => void) | null
-  >(null)
-  if (!subscribeRef.current || needsNewCollection) {
-    subscribeRef.current = (onStoreChange: () => void) => {
-      const subscription = collection.subscribeChanges(() => {
-        // Bump version on any change; getSnapshot will rebuild next time
-        versionRef.current += 1
-        onStoreChange()
-      })
-      // Collection is ready, trigger initial snapshot
-      if (collection.status === `ready`) {
-        versionRef.current += 1
-        onStoreChange()
-      }
-      return () => {
-        subscription.unsubscribe()
-      }
-    }
+  // Return data without status/loading flags (handled by Suspense/ErrorBoundary)
+  return {
+    state: result.state,
+    data: result.data,
+    collection: result.collection,
   }
-
-  // Create stable getSnapshot function using ref
-  const getSnapshotRef = useRef<
-    | (() => {
-        collection: Collection<object, string | number, {}>
-        version: number
-      })
-    | null
-  >(null)
-  if (!getSnapshotRef.current || needsNewCollection) {
-    getSnapshotRef.current = () => {
-      const currentVersion = versionRef.current
-      const currentCollection = collection
-
-      // Recreate snapshot object only if version/collection changed
-      if (
-        !snapshotRef.current ||
-        snapshotRef.current.version !== currentVersion ||
-        snapshotRef.current.collection !== currentCollection
-      ) {
-        snapshotRef.current = {
-          collection: currentCollection,
-          version: currentVersion,
-        }
-      }
-
-      return snapshotRef.current
-    }
-  }
-
-  // Use useSyncExternalStore to subscribe to collection changes
-  const snapshot = useSyncExternalStore(
-    subscribeRef.current,
-    getSnapshotRef.current
-  )
-
-  // Track last snapshot (from useSyncExternalStore) and the returned value separately
-  const returnedSnapshotRef = useRef<{
-    collection: Collection<object, string | number, {}>
-    version: number
-  } | null>(null)
-  // Keep implementation return loose to satisfy overload signatures
-  const returnedRef = useRef<any>(null)
-
-  // Rebuild returned object only when the snapshot changes (version or collection identity)
-  if (
-    !returnedSnapshotRef.current ||
-    returnedSnapshotRef.current.version !== snapshot.version ||
-    returnedSnapshotRef.current.collection !== snapshot.collection
-  ) {
-    // Capture a stable view of entries for this snapshot to avoid tearing
-    const entries = Array.from(snapshot.collection.entries())
-    const config: CollectionConfigSingleRowOption<any, any, any> =
-      snapshot.collection.config
-    const singleResult = config.singleResult
-    let stateCache: Map<string | number, unknown> | null = null
-    let dataCache: Array<unknown> | null = null
-
-    returnedRef.current = {
-      get state() {
-        if (!stateCache) {
-          stateCache = new Map(entries)
-        }
-        return stateCache
-      },
-      get data() {
-        if (!dataCache) {
-          dataCache = entries.map(([, value]) => value)
-        }
-        return singleResult ? dataCache[0] : dataCache
-      },
-      collection: snapshot.collection,
-    }
-
-    // Remember the snapshot that produced this returned value
-    returnedSnapshotRef.current = snapshot
-  }
-
-  return returnedRef.current!
 }

packages/react-db/tests/useLiveSuspenseQuery.test.tsx

@@ -1,14 +1,15 @@
-import { describe, expect, it, vi } from "vitest"
+import { describe, expect, it } from "vitest"
 import { renderHook, waitFor } from "@testing-library/react"
 import {
   createCollection,
   createLiveQueryCollection,
   eq,
   gt,
 } from "@tanstack/db"
-import { Suspense, useState, type ReactNode } from "react"
+import { Suspense } from "react"
 import { useLiveSuspenseQuery } from "../src/useLiveSuspenseQuery"
 import { mockSyncCollectionOptions } from "../../db/tests/utils"
+import type { ReactNode } from "react"
 
 type Person = {
   id: string
@@ -348,7 +349,7 @@ describe(`useLiveSuspenseQuery`, () => {
         const johnDoe = useLiveSuspenseQuery((q) =>
           q
             .from({ persons: personsCollection })
-            .where(({ persons }) => eq(persons.id, `1`))
+            .where(({ persons: p }) => eq(p.id, `1`))
             .findOne()
         )
         return { persons, johnDoe }