Zombie Effect
Has anybody else experienced page hang when navigating quickly between two routes that both use the useLiveQuery hooks? Tanstack router registers the route change, the url changes, but the page content does not change?
When the useLiveQuery hook is not being used in the route, then this issue goes away.
18 Replies
like-gold•4w ago
so the query doesn't ever return? I assume the next page's component is running?
foreign-sapphireOP•4w ago
Hellooo 😃I have attached some code for the two routes. The query itself does return data, the network responses show that electricsql is returning data, the UI just does not update even though the URL has changed. The next page's component does not run (I added a createEffect to render a message when the page mounts, but the logs do not appear when navigating between these two routes). I initially thought this might be a React issue, but I implemented the same thing with solid and ran into the same issue. My suspicion now is that perhaps I am supposed to clean up the subscriptions so I tried using the cleanup method on the collection object and now I have a new issue where the navigation is fine, but the data does not render sometimes.
foreign-sapphireOP•4w ago
Here is a video illustrating the issue. Bit of a strange one.
like-gold•4w ago
headed to 🛏️ but one thing to try is to upgrade all the dependencies. We've fixed a number of bugs around loading data, etc. in the past week or two
foreign-sapphireOP•4w ago
No worries! Thanks, will try that and update here if I do manage to have the issue resolved.
// const teamMemberQb = new Query()
// .from({ teamMember: teamMemberCollection })
// .innerJoin({ team: teamCollection }, ({ teamMember, team }) =>
// eq(teamMember.team_id, team.id)
// )
// .innerJoin({ user: userCollection }, ({ teamMember, user }) =>
// eq(teamMember.user_id, user.id)
// )
// .where(({ team }) => eq(team.organization_id, rData().orgId))
// .select(({ teamMember, user, team }) => ({
// id: user.id,
// name: user.name,
// teamId: teamMember.team_id,
// image: user.image,
// teamName: team.name,
// }))
I have nailed down the culprit to this query. There seems to be an issue with the speed with which the userCollection shape is being preloaded before the innerJoin query runs. This is just a hypothesis. What I am certain of is that the issue lies with the query, not any underlying library code because when I remove everything from the innerJoin({ user: userCollection},...) onwards, everything works perfectly fine.
like-gold•4w ago
and you did confirm you're running the latest versions of all libraries?
if you preload the collections does that help?
this very well could be a bug as it's similar to others we've seen
foreign-sapphireOP•4w ago
I am currently running the following versions:
"@tanstack/electric-db-collection": "^0.1.19",
"@tanstack/solid-db": "^0.1.17", and "@electric-sql/client": "^1.0.10".
foreign-sapphireOP•4w ago
foreign-sapphireOP•4w ago
The above approach works, but there are some collections that take incredibly long to preload the shape, north of 5 minutes. The userCollection and teamCollection load fairly fine, but the rest of the collections seem to hang quite a bit. All of the queries are handled the same way on my Elysia backend. I am still investigating to see what the tables that are taking long to preload shapes have in common 🤔. The collections that take long to preload usually register a 409 in the console from electric sql.
Has anybody logged anything on github for similar issues? I will most likely log something once I can fully confirm that the issue is not sitting between my keyboard and chair; don't want to waste anybody's time 😅 .
like-gold•4w ago
5 minutes is an incredibly long time — how big are the shapes?
5 min long loading is not something we've seen
foreign-sapphireOP•4w ago
These are what table schemas look like. The collections are basically the same but with snake_case because the rows are coming directly from the DB. It is also worth noting that when I actually query the electric sql endpoints (e.g. live/teams), then the response is pretty much instantaneous, so my assumption is that the problem is somewhere on the client.
// Drizzle schemas
export const team = pgTable("team", {
id: text("id").primaryKey().$default(() => createId()),
name: text("name").notNull(),
organizationId: text("organization_id")
.notNull()
.references(() => organization.id, { onDelete: "cascade" }),
createdAt: timestamp("created_at").notNull(),
updatedAt: timestamp("updated_at"),
});
export const groupTeamPermissions = pgTable('group_team_permissions', {
groupId: text('group_id').references(() => tenantGroup.id).notNull(),
teamId: text('team_id').references(() => team.id).notNull(),
groupRoleId: text('group_role_id').references(() => groupRoles.id).notNull(),
}, (table) => [
primaryKey({ columns: [table.groupId, table.teamId, table.groupRoleId] }),
index('group_ws_idx').on(table.groupId)
]);
export const groupTeamPermissions = pgTable('group_team_permissions', {
groupId: text('group_id').references(() => tenantGroup.id).notNull(),
teamId: text('team_id').references(() => team.id).notNull(),
groupRoleId: text('group_role_id').references(() => groupRoles.id).notNull(),
}, (table) => [
primaryKey({ columns: [table.groupId, table.teamId, table.groupRoleId] }),
index('group_ws_idx').on(table.groupId)
]);
like-gold•4w ago
yeah none of this looks strange
how much data is loading?
if you try loading in an incognito window, does it work?
foreign-sapphireOP•4w ago
Currently in dev environment so probably about 50 or so rows of data. I just tried incognito now and it works, no conflicts and 409s. Don't know why this didn't come to mind. I did clear browser data, restart the local electric sql server but that didn't do the trick. Still would be worth knowing what could have been the cause of the conflicts and 409s for those specific tables.
like-gold•3w ago
what do you mean by conflicts?
409s are just how the protocol tells the client that the shape handle they requested is gone now
so it needs to re-request
this only takes another round trip to fix
foreign-sapphireOP•3w ago
My wording was slighlty off, my apologies. What I meant to convey was that it is these specific 3 tables that have return 409. None of the other tables seem to trigger a 409 regarding Electric SQL handling the shape. Even after trying again in the incognito tab, the behaviour comes back after a few minutes of navigating throughout the app. There is definitely an underlying issue with the 3 tables that cause the app to hang, which is what I am trying to figure out. Everything works perfectly fine when I create collections for other tables and query the electric sql backend, but as soon as I query the collections for the problematic tables, something breaks.
like-gold•3w ago
do you think you could share your app or create a small reproduction? That'd be really helpful for tracking down what's wrong
foreign-sapphireOP•3w ago
That would be incredibly helpful! Thanks so much. I am more than happy inviting you to both repos. Or I can put together a small recreation in a public repo, whichever is easiest for you.
like-gold•3w ago
ok great, I assume I can run your app locally fairly easily? Just looking at it directly would work well then