fix stuck empty remounted live query that uses joins bug (#484)

Author: samwillis

.changeset/deep-bushes-sell.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/db": patch
+---
+
+fix an bug where a live query that used joins could become stuck empty when its remounted/resubscribed

packages/db/src/query/live/collection-config-builder.ts

@@ -49,15 +49,11 @@ export class CollectionConfigBuilder<
     | undefined
 
   // Map of collection IDs to functions that load keys for that lazy collection
-  readonly lazyCollectionsCallbacks: Record<string, LazyCollectionCallbacks> =
-    {}
+  lazyCollectionsCallbacks: Record<string, LazyCollectionCallbacks> = {}
   // Set of collection IDs that are lazy collections
   readonly lazyCollections = new Set<string>()
   // Set of collection IDs that include an optimizable ORDER BY clause
-  readonly optimizableOrderByCollections: Record<
-    string,
-    OrderByOptimizationInfo
-  > = {}
+  optimizableOrderByCollections: Record<string, OrderByOptimizationInfo> = {}
 
   constructor(
     private readonly config: LiveQueryCollectionConfig<TContext, TResult>
@@ -168,6 +164,11 @@ export class CollectionConfigBuilder<
       this.inputsCache = undefined
       this.pipelineCache = undefined
       this.collectionWhereClausesCache = undefined
+
+      // Reset lazy collection state
+      this.lazyCollections.clear()
+      this.optimizableOrderByCollections = {}
+      this.lazyCollectionsCallbacks = {}
     }
   }
 

packages/db/tests/query/live-query-collection.test.ts

@@ -1,7 +1,11 @@
 import { beforeEach, describe, expect, it } from "vitest"
 import { Temporal } from "temporal-polyfill"
 import { createCollection } from "../../src/collection.js"
-import { createLiveQueryCollection, eq } from "../../src/query/index.js"
+import {
+  createLiveQueryCollection,
+  eq,
+  liveQueryCollectionOptions,
+} from "../../src/query/index.js"
 import { Query } from "../../src/query/builder/index.js"
 import {
   mockSyncCollectionOptions,
@@ -318,6 +322,126 @@ describe(`createLiveQueryCollection`, () => {
     expect(() => liveQuery.subscribeChanges(() => {})).not.toThrow()
   })
 
+  it(`nested live query should not go blank after GC and resubscribe`, async () => {
+    type Thread = { id: string; last_email_id: string; last_sent_at: number }
+    type LabelByEmail = { email_id: string; label: string }
+
+    const threads = createCollection(
+      mockSyncCollectionOptions<Thread>({
+        id: `threads-for-nested-gc-repro-collection`,
+        getKey: (t) => t.id,
+        initialData: [
+          { id: `t1`, last_email_id: `e1`, last_sent_at: 3 },
+          { id: `t2`, last_email_id: `e2`, last_sent_at: 2 },
+        ],
+      })
+    )
+
+    const labelsByEmail = createCollection(
+      mockSyncCollectionOptions<LabelByEmail>({
+        id: `labels-for-nested-gc-repro-collection`,
+        getKey: (l) => l.email_id,
+        initialData: [
+          { email_id: `e1`, label: `inbox` },
+          { email_id: `e2`, label: `work` },
+        ],
+      })
+    )
+
+    // Source live query (pre-created)
+    const sourceLQ = createCollection({
+      ...liveQueryCollectionOptions({
+        query: (q: any) =>
+          q
+            .from({ thread: threads })
+            .orderBy(({ thread }: any) => thread.last_sent_at, {
+              direction: `desc`,
+            }),
+        startSync: true,
+        gcTime: 5,
+      }),
+      id: `source-lq`,
+    })
+
+    // Nested live query built from the source live query
+    const nestedLQ = createCollection({
+      ...liveQueryCollectionOptions({
+        query: (q: any) =>
+          q
+            .from({ thread: sourceLQ })
+            .join(
+              { label: labelsByEmail },
+              ({ thread, label }: any) =>
+                eq(thread.last_email_id, label.email_id),
+              `inner`
+            )
+            .orderBy(({ thread }: any) => thread.last_sent_at, {
+              direction: `desc`,
+            }),
+        startSync: true,
+        gcTime: 5,
+      }),
+      id: `nested-lq`,
+    })
+
+    // Wait for initial sync
+    await nestedLQ.preload()
+    expect(nestedLQ.size).toBe(2)
+    expect(nestedLQ.status).toBe(`ready`)
+
+    // First subscription cycle
+    const unsubscribe1 = nestedLQ.subscribeChanges(() => {})
+
+    // Verify we still have data after subscribing
+    expect(nestedLQ.size).toBe(2)
+    expect(nestedLQ.status).toBe(`ready`)
+
+    // Unsubscribe and wait for GC
+    unsubscribe1()
+    const deadline1 = Date.now() + 500
+    while (nestedLQ.status !== `cleaned-up` && Date.now() < deadline1) {
+      await new Promise((r) => setTimeout(r, 1))
+    }
+    expect(nestedLQ.status).toBe(`cleaned-up`)
+
+    // Try multiple resubscribe cycles to increase chance of reproduction
+    for (let i = 0; i < 3; i++) {
+      // Resubscribe
+      const unsubscribe2 = nestedLQ.subscribeChanges(() => {})
+
+      // Wait for the collection to potentially recover
+      await new Promise((r) => setTimeout(r, 50))
+
+      expect(nestedLQ.status).toBe(`ready`)
+      expect(nestedLQ.size).toBe(2)
+
+      // Unsubscribe and wait for GC again
+      unsubscribe2()
+      const deadline2 = Date.now() + 500
+      while (nestedLQ.status !== `cleaned-up` && Date.now() < deadline2) {
+        await new Promise((r) => setTimeout(r, 1))
+      }
+      expect(nestedLQ.status).toBe(`cleaned-up`)
+
+      // Small delay between cycles
+      await new Promise((r) => setTimeout(r, 20))
+    }
+
+    // Final verification - resubscribe one more time and ensure data is available
+    const finalUnsubscribe = nestedLQ.subscribeChanges(() => {})
+
+    // Wait for the collection to become ready
+    const finalDeadline = Date.now() + 1000
+    while (nestedLQ.status !== `ready` && Date.now() < finalDeadline) {
+      await new Promise((r) => setTimeout(r, 10))
+    }
+
+    expect(nestedLQ.status).toBe(`ready`)
+    expect(nestedLQ.size).toBe(2)
+
+    finalUnsubscribe()
+  })
+
   it(`should handle temporal values correctly in live queries`, async () => {
     // Define a type with temporal values
     type Task = {