queryClient.refetchQueries() is refetching but onSuccess/onError isn't getting fired

[rahulsuresh-git]

I am trying to refetch a query using queryClient.refetchQueries([QUERY_ID]) that is written in Component X from Component Y. The refetch happens fine as I am able to see the request in the network tab but the onSuccess/onError callback is not getting fired on the original query in Component X.

Is this the expected behaviour?
If yes, how do I go about solving it? I have some operations that take place inside the onSuccess callback, such as state updations, action dispatching etc.

Thanks!

[TkDodo]

No, It is not expected. Do you have a codesandbox reproduction?

[rahulsuresh-git]

Okay, I guess I have some idea on what might be happening here. There's definitely a possibility that component X might not have been mounted on the screen.
In that case, how does the queryClient.refetchQueries() work? Just curious. @TkDodo

Also, if I wish to reuse the same query across different components without passing them as props, what would be the best way to go about it? Couldn't find anything useful in the docs.

[TkDodo]

In that case, how does the queryClient.refetchQueries() work? Just curious.

refetchQueries will always refetch, but onSucces / onError callbacks are per-observer options, and if you don't have a mounted component that uses that query, it can't be called.

btw, invalidateQueries is preferred in most situations because it will only refetch active queries (those that are really used on the screen), and mark all others as invalidated so that they will then refetch when they are next used :)

Also, if I wish to reuse the same query across different components without passing them as props, what would be the best way to go about it? Couldn't find anything useful in the docs.

This article should have you covered: https://tkdodo.eu/blog/react-query-as-a-state-manager

[rahulsuresh-git]

Thank you for the quick response! Will take a look :)