T
TanStack•2mo ago
apparent-cyan

Tanstack DB - Live Queries return zero results sometimes

I have a nested datastructure - a trip can contain segments or days, segments contain days, and days contain activities. I am trying to render these via live electric sql collections. When first load my page everything works fine, but when I edit the list of days my activities seemingly disappear 
[DayEditCard - 39] Activity query state: 
Object { isCleanedUp: false, isError: false, isIdle: false, isLoading: false, isReady: true, state: Map(1), status: "ready" }
DayEditCard.tsx:48:11
[DayEditCard - 39] Component data: 
Object { activityCount: 1, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.745Z" }
DayEditCard.tsx:57:11

---

[DayEditCard - 39] Activity query state: 
Object { isCleanedUp: false, isError: false, isIdle: false, isLoading: false, isReady: true, state: Map(0), status: "ready" }
DayEditCard.tsx:48:11
[DayEditCard - 39] Component data: 
Object { activityCount: 0, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.874Z" }
DayEditCard.tsx:57:11
Object { activityCount: 0, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.874Z" }
[DayEditCard - 39] Activity query state: 
Object { isCleanedUp: false, isError: false, isIdle: false, isLoading: false, isReady: true, state: Map(1), status: "ready" }
DayEditCard.tsx:48:11
[DayEditCard - 39] Component data: 
Object { activityCount: 1, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.745Z" }
DayEditCard.tsx:57:11

---

[DayEditCard - 39] Activity query state: 
Object { isCleanedUp: false, isError: false, isIdle: false, isLoading: false, isReady: true, state: Map(0), status: "ready" }
DayEditCard.tsx:48:11
[DayEditCard - 39] Component data: 
Object { activityCount: 0, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.874Z" }
DayEditCard.tsx:57:11
Object { activityCount: 0, dayId: 39, dayTitle: "Day 2", timestamp: "2025-08-29T15:13:25.874Z" }
those console logs are from just one "event" - ie me deleting a (separate) day I'm trying to figure out why this happens, and more generally what the "right" way to use live collections is. Currently I define the collection of activities for a given day within the component for a day: 
export function DayEditCard({ day, depth = 0, className }: DayEditCardProps) {
  // Query activities for this day
  const {
    data: activities,
    isCleanedUp,
    isError,
    isIdle,
    isLoading,
    isReady,
    state,
    status,
  } = useLiveQuery(
    (q) =>
      q
        .from({ activity: activitiesCollection })
        .where(({ activity }) => eq(activity.day_id, day.id)),
    // .orderBy(({ activity }) => activity.order_index),
    // [day.id],
  )
  })
export function DayEditCard({ day, depth = 0, className }: DayEditCardProps) {
  // Query activities for this day
  const {
    data: activities,
    isCleanedUp,
    isError,
    isIdle,
    isLoading,
    isReady,
    state,
    status,
  } = useLiveQuery(
    (q) =>
      q
        .from({ activity: activitiesCollection })
        .where(({ activity }) => eq(activity.day_id, day.id)),
    // .orderBy(({ activity }) => activity.order_index),
    // [day.id],
  )
  })
this means I only have the activities for this day available. Is this the right way to use useLiveQuery?
10 Replies
foreign-sapphire
foreign-sapphire•2mo ago
cc @samwillis @aneidon there's been a few reports of this of collections which lose their data suddenly — DB collections get auto-gced if not in use — but we're not tracking whether they're in use or not correctly in some scenarios atm causing this issue
apparent-cyan
apparent-cyanOP•2mo ago
I seem to have fixed it. I was using electric sql with the experimental flagELECTRIC_FEATURE_FLAGS: allow_subqueries this allowed me to do day_id IN (SELECT id FROM days WHERE trip_id IN (SELECT id FROM trips WHERE user_id = '${session.user.id}')), instead of having to add a user_id field to each nested type (like an activity, which belongs to a day which belongs to a day which nbelongs to a trip/segment which belongs to a user, etc) adding the user_id field to each model and directly querying things seems to have fixed it!
foreign-sapphire
foreign-sapphire•2mo ago
heh ok, then yeah, that could have been a subqueries bug (which as you know is very new)
apparent-cyan
apparent-cyanOP•2mo ago
I do, I should mentioned first but I was still trying to debug. Thanks for the quick response!
fascinating-indigo
fascinating-indigo•2mo ago
That's an interesting lead on this issue, I was scratching my head a lot this week. Subqueries in where clauses will case a 409, so it's likely that could be the cause not the GC.
foreign-sapphire
foreign-sapphire•2mo ago
ooo
fascinating-indigo
fascinating-indigo•2mo ago
The other report wasn't using subqueries But likly had 409s
apparent-cyan
apparent-cyanOP•2mo ago
I was seeing 409s when I initially loaded the page, but interestingly I didn't see any once i modified the nested structure, which is what initially led me to dismiss the subqueries as a cause and the issue only appeared once I made a modification (ie the page loaded correctly at first, despite 409s)
fascinating-indigo
fascinating-indigo•2mo ago
Yes, so the detail here is that the current version of subqueries invalidates a shape when the subquery changes (we will be optimising this), that sends a 409. The electric collection then clears its state and resyncs. So I think it sounds like there is an issue in the truncate logic still - I fixed one on Wednesday that I thought could have been the issue but it looks like there is still something happening. Thanks for this @aneidon
apparent-cyan
apparent-cyanOP•2mo ago
sure thing, thank you guys so much for the super quick responses! 
      '@tanstack/electric-db-collection':
        specifier: ^0.1.6
        version: 0.1.9(@electric-sql/client@1.0.9)(typescript@5.9.2)
      '@tanstack/electric-db-collection':
        specifier: ^0.1.6
        version: 0.1.9(@electric-sql/client@1.0.9)(typescript@5.9.2)

Did you find this page helpful?