Questions about Observer and Query Invalidations

[aldy97]

In the web app that I am currently working on, I encounter a case that I need to invalidate a query to a data after it is mutated.

So I naturally call await queryClient.invalidateQueries(...), but actually it is already marked as fetching based on what I can see in the dev tool. So that it does not send another request to the server at the point that I expect it to. So the data rendered is out of sync.

What I am doing to make it work around is as following:

await queryClient.cancelQueries(['user-application', applicationId]);
await queryClient.invalidateQueries(['user-application', applicationId]);

My first question is that: is there any way we can easily find which observer automatically invalidate the query for me, which is unexpected? I have called the same invalidations on one key in many places, so it is hard to find.

The second one is: the workaround above is not elegant, is that possible that we can have an option(or already exists but just I didn't know) that cancels the pending one and re-invalidate a query based on the key, assuming it is true that invalidateQueries by default does not invoke a new request if it is already fetching?

Thank you!

[TkDodo]

In v4, calling invalidateQueries will, per default, cancel existing queries and re-run them.

In v3, you can do:

await queryClient.invalidateQueries({ queryKey: ['todos'] }, { cancelRefetch: true })

to achieve the same thing.

https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4#consistent-behavior-for-cancelrefetch

[aldy97]

Thanks!