useQuery not syncing

#1

Hi,

I’m having an issue with useQuery not syncing when using Next.js routes.

It works fine in the same route, for example if I am displaying a list of records and delete one it updates immediately. However if I add a new record and immediately go to a new route to edit that new record (with the new id in the route), useQuery() returns null and never updates to show the initial values of the record. useQuerySingleResult() does the same. The id in the route is correct.

Also, from the edit record route, if I delete the record and return to the route with the list of records, it still shows the deleted record, even though it has been successfully deleted.

#2

Interestingly it works fine in Safari, but not in Chrome or Brave. In Firefox it doesn’t work when creating a new record, but does when deleting.

#3

Is there anything in the dev tools console?

Could you maybe provide a small reproducable example repo so we can debug this?

#4

There aren’t any errors in the console as such, although I am logging when the query returns a null result.

You can test it with this repo:

It’s based on the thin-next-starter repo.

To test it:

  1. Click on the “My Collections” in the Nav bar.
  2. Click the “Add” button to add a new collection, it should go to a new route “collection/:id” to edit the collection
  3. It should show the new collection’s default name “My Collection” in an input field, however the input field is incorrectly empty. (If you go back to My Collections and then click on the new collection it then shows the name in the input field).
  4. When in the edit screen, if you delete the collection, it successfully deletes and returns to the “/my-collections” route, but the deleted record is still shown. You need to reload for the deleted record to disappear.
#5

I also created a similar project using react router and it had the same issues.

It’s a been a while since I’ve used react so I may be doing something wrong.

#6

The input is inital empty because on the first render the const collection = useQuerySingleResult(query('collections').where('id', idStr)); will set collection = null while it’s fetching the data.

Now initialValue={collection?.title} will set initialValue={null}. Now when the collection has been fetched, the text field will not change the initial value because it already was set to null previously. To fix this you could render a loading spinner, and only render the form after the record has been fetched.

#7

I can reproduce this issue. It might be something related to caching.

As a workaround try to use router.back(); instead of router.push('/my-collections'); in EditCollection.