There is an issue I’ve got into recently.
Let’s say, there are a few components [A1, A2, A3] rendered. There is another component [B] rendered. B is not related to A1, A2, A3 in any hierarchical way (the components are peers, no parent-child connection).
A1, A2, and A3 have data from a query called aQuery. aQuery is refetched every minute. The data is stale by default.
There is a button in B component clicking on which makes all instances of aQuery invalid. (Something like Refresh Data).
I have 2 states supported in A:
- Loading – I show a message “Loading data…”
- Fetching / refetching – I show the previous data until new one is loaded.
And the issue is in a case where I click this button and I have to show “Loading data…”. Each click on a button from B makes all aQuery‘s get refetched. However, I need it to be reloaded (because I need to render over the components inside A).
In a nutshell:
Is there any way in react-query to invalid a query in a way to make it get reloaded not refetched?