StaleTime is bypassed when using refetch

[TomPradat]

Describe the bug

refetch always forces a XHR query even if data is not stale

To Reproduce

https://codesandbox.io/s/flamboyant-browser-42fgy?file=/src/index.js

If you click on the button, it'll cause the useQuery to refetch and send an XHR query in the browser

Expected behavior

I'd expect the cached data to be used in this case

Desktop (please complete the following information):

• OS: [OS X]
• Browser: [chrome]
• Version: [Version 85]

[drostano]

The docs were updated to remove "force: true| false" it seems.

Stale is not checked with a <button onClick={refetch} />

So, is there a way to refetch and not send XHR if stale exists?
Can't find it anywhere.

Example use case and maybe something to consider... some legacy components I have have multiple useQuery calls in them, the query to use is dependent on props, they all return "refetch", and whichever chosen refetch is called on useEffect(),[]. If the query has SSR supplied data which is not stale, the XHR will always fire on the client. I know I can move them into a provider which only calls one useQuery, but it would be preferable to have a refetch({checkStale:true}) (if it does not exist already)

[TkDodo]

So, is there a way to refetch and not send XHR if stale exists?

try queryClient.invalidateQueries

some legacy components I have have multiple useQuery calls in them, the query to use is dependent on props, they all return "refetch", and whichever chosen refetch is called on useEffect(),[].

this sounds a bit complicated. Why not just use the enabled option to enable the query that should run and disable the others?

[drostano]

Hmm good idea and thanks for the fast reply. Problem is, setting enabled would require a setState and miss the first pass SSR render. Or the provider would need to supply which one is enabled without a load of state logic.

It's not ideal. But they are legacy components, but there are 10 - 20 of them in this format. I think we are going to stick with our original useFetchHackery and Lru-cache unless react-query extends the scope to implement a refetch({honorCache:true})

Probably an edge case so not to worry - just too many components written to manually call refetch in use effect on the client based on logic, even tho SSR has already preloaded the cache :(

[TkDodo]

Problem is, setting enabled would require a setState

not sure i get that. You said the props decide which query to use, and you call refetch in a useEffect. The same condition that decides which query to choose should also be able to enable only that query and disable the others instead...