Unable to get caching working

[captainR0bbo]

My expectation is that after my api returns data for a given query key, that react-query won't hit my api again for that same query key for at least some period of time. I have tried setting cacheTime with no change in behavior. My api gets hit every time. I assume i must be doing something wrong.

The below codesandbox is the simplest way I can try and demonstrate my issue. Using the react-query devtools, my query never shows as fresh, it is always stale or inactive. This is linked to a public API but on mine i can see it is being hit each time the button is clicked even though the key is the same value.

Codesandbox

Thanks again for any assistance!!!

[TkDodo]

My expectation is that after my api returns data for a given query key, that react-query won't hit my api again for that same query key for at least some period of time.

this is what staleTime is for. I’ve written about the difference between staleTime and cacheTime here: https://tkdodo.eu/blog/practical-react-query#the-defaults-explained

[captainR0bbo]

The use case here is a barcode scanner, and if we scan the same code again in a short period, I don’t want to go back to the database each scan to see if it’s a valid code and get the related data. I thought the cache would help here. So I had been counting on onSuccess when the query returned as my trigger for when the query completed to take the user to the next screen.
My useQuery hook is triggered using the enabled option after a barcode is scanned. But now we scan, which enables the query, which returns from the cache and does not call onSuccess.
Hope that makes sense.

[TkDodo]

It does. Seems like a useEffect depending on your data should get it done :)

[captainR0bbo]

Thank you sir. Appreciate the feedback very much!

[mrmartineau]

@TkDodo I just wanted to say thanks for your blog link, it cleared up a few misunderstanding I had with react-query. Is it linked-to from the react-query docs site? If not, I think it might be a good idea to have a link somewhere because it is really useful.

[TkDodo]

Thank you, that's nice to hear. Generally, my blog is my personal opinion, though I think I have a solid understanding of how react-query works :)

Our plan is to update the docs with the learnings I've had in the past (because I keep getting great feedback for my series of blogposts) and make some things more clear, and then outline what the possible options are with drawbacks and advantages for each one of them. Often, there is no clear "winner" and "it depends" :)