Why my query refetches on mount when I set it to false

[Djordjenp]

I use query in my search functionality and I want when my user searches for something to cache that data(which is done automatically), and when he searches for that same thing later to display cached data without a refetch. For instance here is some demo of my app:

https://codesandbox.io/s/quirky-pateu-v4uskm?file=/src/Home.js

When I put letter "t" in my input and search happens I see in devtools that my query key is registered. After that I click on some of the link, after which my query becomes inactive(all good so far). Then I go back to my previous page and search for the same thing (letter "t") and my query is doing refetch again even though query has the same key as before and I specified in config "refetchOnMount" to be false.

Why does this happen?

[TkDodo]

it's a good question. It's because the observer (your useQuery "instance") is not really "mounting". It is mounting with an empty search value. Then, the search value changes from empty string to t. At that point, the observer is already mounted - it just switches from one cache entry to another.

There isn't really a flag to disable refetches for this "event". I know rtk-query combines the two with refetchOnMountOrArgChange. My suggestion is to always set staleTime to something you're comfortable with and take it from there without altering the flags, as caching is more "time-based" than "event-based". The refetch only happens because your staleTime is 3 seconds. That means data is not fresh anymore after 3 seconds, which is why it can and will be refetched according to our heuristics. For example, if you re-focus the window or lose your network connection (and re-gain it shortly afterwards), it will refetch because data is stale. If you want your planets to stay fresh longer, set a higher staleTime.

Alternatively, you could add the search query to the url so that navigating back will take you directly to the filtered list you were on before. That would make your useQuery mount directly with t and the false refetchOnMount would prevent the refetch then.

[Djordjenp]

Oh now I understand, thank you for your help.