Component Re Render on Cache Reset with useMutation

[puvi034]

Thanks for awesome library. I have a requirement where I directly use useMutation(mutateFn, options) and on success response , I set response in the QueryCache by creating new query key. Assume there are no instances of useQuery as my most of the calls are useMutation. In each mutation call I keep updating the queryCache. My question is does it re render the component where ever I have useQueryCache instance. I understand it re renders component has reference to useQuery instances.

[TkDodo]

I understand it re renders component has reference to useQuery instances.

yes, that's true.useQueryCache is just react-context, it will not re-render if you update data inside the cache.

[TkDodo]

It seems like it is possible with a manual subscription (https://react-query.tanstack.com/docs/api/#querycachesubscribe) but I am still not sure what you are trying to achieve. Maybe you have a runnable example (preferably codesandbox) that I can take a look at?

Put it that way: If you add data to the cache under the key "contract", is there not a single instance where you are doing useQuery('contract') that creates a subscription to that data?

If this is really not the case and you are only using useMutation, then I wouldn't use react-query for that... Take the response from the mutation and put it into React-Context and subscribe via useContext - that would be much simpler. The advantage of react-query comes from subscribing to the data via useQuery, but the underlying assumption is that you have a data fetching function that will retrieve the data. Manually writing to the queryCache is just something you can do additionally to that, but it shouldn't be the primary means of filling the cache ...

[puvi034]

My case is well explained by you 2nd para. Thanks for your response.

[ZeeEssDoubleU]

@TkDodo, I have a further question. There are instances where I just want useQuery to read cached data, without an associated data fetching function. An instance like this would be just like what @puvi034 is talking about.

For instance, here's a super contrived example. Let's say I increment with useMutation('counter', ...), then onSuccess I call queryClient.setCachedData(['counterResult']) with the response of useMutation('counter, ...). Now I just want to read the cached data with useQuery('counterResult').

This seems to subscribe and return fresh data, but I keep getting an error that says Missing queryFn. Is there any way to resolve this error without adding a fetch function?

[TkDodo]

There are instances where I just want useQuery to read cached data, without an associated data fetching function.

but, why? you can just as easily use any other global state manager for that, and they are usually better suited. react-query is promise based, and you would always get one render cycle where your state is loading before you get your data. I'd put that data in zustand instead for example

[ZeeEssDoubleU]

My thought was that if data was already there, why move it elsewhere in the app? That said, if moving it to the local state on success is best practice, that's what I'll do. Thanks

[puvi034]

This question is also kind of related to my question.
#1336