useQuery doesn't sync

In the below code when I update todo with changed complete status, it won’t hide if complete filter is on. Full code here: https://github.com/janat08/todomvc-react-hooks/tree/master

const filter = useQuery(query('filters'))
let search = null
if (filter !== null){
  switch(filter[0].value){
    case 'all':
      search = null; break;
    case "completed":
      search = true; break;
    case 'active':
      search = false; break;
  }
}

let todoQ = query('todos').orderByDesc('createdAt')
if (filter !== null && search !== null){
  todoQ = todoQ.where('completed', search)
}

const todos = useQuery(todoQ)

I can reproduce the issue. This is a bug. Will be fixed by tomorrow.

Btw: there’s also useQuerySingleRecord which automatically returns the first item of the result, like result[0]. E.g. you could write the above code like this:

const filter = useQuerySingleResult(query('filters'))
let search = null
if (filter !== null){
  switch(filter.value){
    case 'all':
      search = null; break;
    case "completed":
      search = true; break;
    case 'active':
      search = false; break;
  }
}

@janat08 there’s new answers to this yesterday but email notifications were broken, so you might not have seen the answers

A fix for this is live now :+1:

The completed status is reactive, but sorting doesn’t work by completed status for example.

Can you share some code where this doesn’t work?

Once Improved new record behaviour heuristic by mpscholten · Pull Request #52 · digitallyinduced/thin-backend · GitHub is merged and released, this sorting issue should also be solved

I’ve just released thin-backend v0.10.0 and thin-backend-react v0.10.0

    "thin-backend": "^0.10.0",
    "thin-backend-react": "^0.10.0",

If you update to these versions, the issue should be gone.

@janat08 I think you’re replying via email. Just FYI: While I see your email, it’s not showing up in the web interface here. So it’s better to reply in the web ui.

I’ve just published thin-backend 0.10.03 and thin-backend-react 0.10.1. When you’ve updated to these versions, you can do the following:

import { NewRecordBehaviour } from 'thin-backend';

// ...

const todos = useQuery(todoQ, {
  newRecordBehaviour: NewRecordBehaviour.PREPEND_NEW_RECORD
})

Can you give this a try?

I tried it locally in case there are issues with websocket for sort operations, but no it doesn’t work there.

You can run it yourself at Dashboard — Gitpod if you can’t be bothered to install it. you’re looking for the list file.

I just checked it out again. Do you mean the issue is that when you’re on the All tab, and complete an uncompleted task, that this will not trigger a re-order/re-sort?

Yes. I thought I left a reply. Is this a trivial fix, or the product is kinda over?

I think for now we cannot easily change this behaviour. Also from a UX perspective it might be a bit confusing for a user to see an item just disappearing and moving somewhere else (it would need an animation to be clear to the user).

Draft for article. Between the bug, and that it doesn’t try and determine that it already has all the data between filters like all/active/complete, it’s cheap shortcut to local state management. Redux would offer better UX.

Thanks. I just read through the article :slight_smile: Looks good.

and that it doesn’t try and determine that it already has all the data between filters like all/active/complete,

For this kind of app it really makes sense to do the filtering on the client side. This would be a bit more in line with how Thin is intended to be used. This would mean zero latency when switching the filters and also avoid the re-order bug you’ve hit.