I have a simple todo list with statuses and tasks, both sorted by position.
Example query:
const { data: todoData } = useLiveQuery((q) => {
return q
.from({
status: statusCollection,
})
.orderBy(({ status }) => status.position, "asc")
.select(({ status }) => ({
id: status.id,
name: status.name,
position: status.position,
tasks: q
.from({ task: taskCollection })
.where(({ task }) =>
eq(task.status_id, status.id),
)
.orderBy(({ task }) => task.position, "asc")
.select(({ task }) => ({
id: task.id,
name: task.name,
position: task.position,
})),
}));
});
After an optimistic update on the child collection (tasks), the orderBy is ignored. The list is only sorted correctly after the server confirmation (second render).
If I perform an optimistic update on the parent collection (status), everything works as expected - sorting is applied immediately.
Before the action (task position change):
[{id: 2, name: 'Test', position: 0}
{id: 1, name: 'Hello', position: 1} ...]
After optimistic update:
[{id: 2, name: 'Test', position: 1}
{id: 1, name: 'Hello', position: 0} ...]
After server confirmation:
[{id: 1, name: 'Hello', position: 0}
{id: 2, name: 'Test', position: 1} ...]
Tested on:
"@tanstack/electric-db-collection": "^0.2.43",
"@tanstack/react-db": "^0.1.79",
I have a simple todo list with statuses and tasks, both sorted by position.
Example query:
After an optimistic update on the child collection (tasks), the orderBy is ignored. The list is only sorted correctly after the server confirmation (second render).
If I perform an optimistic update on the parent collection (status), everything works as expected - sorting is applied immediately.
Before the action (task position change):
After optimistic update:
After server confirmation:
Tested on: