How to force skipping cache in a query?

[Kaltsoon]

I'm aware that using cacheTime: 0 with useQuery will skip cache if query is not already mounted. That being said, how to skip cache in component B in this example: https://codesandbox.io/s/dreamy-hoover-ejosw?file=/src/index.js. With "skip cache" in this context I mean not using the cached data once the B component mounts (like it would work with cacheTime: 0 if the query wouldn't be mounted elsewhere). In my opinion, there should be a bulletproof way to skip cache in such a scenario.

To add a bit more context: we are working with forms and we need to be sure that the data is fresh once the component mounts, so we want to go through the { data: null, isLoading: true, ... } => { data: ..., isLoading: false, ... } transition every time the component mounts. We have been successful so far with cacheTime: 0, but I noticed that cache is not ignored if query is already mounted in some other component. This is a bit of a pitfall in my opinion.

[TkDodo]

You’d need to provide a unique query key to achieve that.

[Kaltsoon]

Formik also has the enableReinitialze prop which would work nicely with react-query's background updates: formium/formik#1033 (comment)

Yes, but I think it is not good UX that the form's content randomly changes after the initialization at some point in time.

[Kaltsoon]

If background updates won’t likely yield anything new, why not just use what you have in the cache 🙃

But it does after mutations as I mentioned earlier.

[Kaltsoon]

I think what I'm trying to say is that react-query's SWR does the job 90% of cases, but I don't understand why it is so insane to ask for a way to skip cache. It isn't an anti-pattern so I don't understand why there isn't an explicit and easy way to do it without custom implementations.

[TkDodo]

Yes, but I think it is not good UX that the form's content randomly changes after the initialization at some point in time.

valid point, but imo so is showing a loading spinner instead of the form even though you have data in the cache already.

But it does after mutations as I mentioned earlier.

you can remove the entry from the cache after a mutation with queryClient.removeQueries, I think that would serve the purpose here.

I don't understand why it is so insane to ask for a way to skip cache

It's not insane, but off the top of my head, I would see a couple of issues with such a flag.

• What happens if the component re-renders? I guess we don't want to bypass then, so it's more like: bypass the cache if a new observer mounts for the first time.
• What happens if you have multiple observers? Usually, they are all informed about the state a query is in. Now if I have one mounted observer that is in success state, and then one observer mounts with skipCache: true, would the other observer also go to loading state? If not, would we have two observers of the same query, where each is in a different state (one is loading, on is success)?
• What about the onSuccess callback - is it called for all observers then?

[Kaltsoon]

Those are valid points perhaps I was oversimplifying the skipCache option a bit. The solutions you proposed are quite reasonable. Thanks for the discussion!