Infinite Queries, Queries Key and Invalidations

[gwenoleR]

Hi !
I'm using this library on my app and it's just a game changer. It's very nice to manage server state with this tool !

But I have some trouble since I implement the Infinite Scroll using infinite query.

I will try to explain the use case.
The app can be simplify and compare to a big Todo App.
We can apply some filters to the todo and mark them as 'Done'.
The UI show the list of todos 20 by 20 using the infinite Query

So in the ReactQuery cache it's design with this key:
['todos'] to request Todos without any filters
['todo', 'UI'] to request Todos with tag UI

Now the problem
When I open the app it make a request for all todos. So in cache i have ['todos']
Now the user apply a filter, a new request is launch, and now in cache i have :

• ['todo', 'UI']
• ['todos']

In the screen the user has the data of only this key : ['todo', 'UI']
Now, the user tag a Todo as Done

So I call a mutation.
The mutation edit in this key ['todo', 'UI'] the Todo chosen by the user and optimisticly edit the status in it to show the result to the user, and finally, it should invalidate the key ['todos']. Unfortunatly, when the user remove the filters, the page show the data of ['todos'], but the data were not refetch ! So the previous Todo than the user has tag as Done is still not done.

I think I missed something somewhere, but I don't know where, any advices ?

[TkDodo]

invalidating via queryClient.invalidateQueries(['todos']) should invalidate both ['todo', 'UI'] and ['todos']. invalidate is "smart" and only re-fetches queries that are currently active, but marks others as stale. So when you switch back to the other view, it might briefly show the outdated state, but still refetch. If you don't want that, you can:

• optimistically update all views
• use refetchQueries instead of invalidateQueries - it will always refetch, even if the view is not currently rendered.

[gwenoleR]

Thanks for your quick response !

it might briefly show the outdated state, but still refetch.

This is what I had understanding from the documentation, unfortunatly it seems that the queryClient.invalidateQueries(['todos']) is not refetching :(

Using refetchQueries works nice, but it's a little bit overkill, no ?

[TkDodo]

This is what I had understanding from the documentation, unfortunatly it seems that the queryClient.invalidateQueries(['todos']) is not refetching :(

must be something else that is getting into the mix, because this usually works. If you create a codesandbox I can take a look

[gwenoleR]

Ok thanks, I will try to reproduce the problem

[gwenoleR]

I do my best to try to reproduce but it's working like expect here...
https://codesandbox.io/s/quirky-cloud-bpjv0

But I can see a difference in the process. When I change the filter in CodeSandbox, the key [todos] is tag as inactive, not in my case. It's may be a clue...

EDIT: My bad, the key is tag as inactive, but the color is still yellow in the DevTools, this is why i was confused