How to prevent cached data being shown until a button is clicked

[wcardosodev]

What we require is to have all fetching of data behind an "Apply" button. To do this, I've used useQuery with enabled: false and the returned refetch function to fetch the data on the click event.

The problem I'm running into is with enabled: false the data will still come back from the cache instantly without awaiting a refetch being triggered. This seems like expected behaviour as per: https://tanstack.com/query/v4/docs/framework/react/guides/disabling-queries
Where it states that If the query has cached data, then the query will be initialized in the status === 'success' or isSuccess state..

How do I get around this though, to be able to only get the data, cached or from the api, when the button is clicked

[wcardosodev]

I think I've found a solution from: https://tkdodo.eu/blog/effective-react-query-keys#automatic-refetching which is to not use refetch but instead to store the filter state (I'm using jotai so in an atom) and when the apply button is clicked to update the state with the new filters