T
TanStack•2d ago
yelping-magenta

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?
2 Replies
yelping-magenta
yelping-magentaOP•2d ago
apologies if this isn't the right spot for this question, I couldn't find a dedicated area for DB!
conscious-sapphire
conscious-sapphire•2d ago
<id:browse> #db & #db-questions 🙂

Did you find this page helpful?