How to check for success/error using queryClient.refetchQueries

[ernes-to]

Hello, I'm trying to implement this feature where I fetch some data on page load, and then after a button is clicked to trigger a refetch of this same query, and the request completes, I render a success or error notification in the UI.

My idea was to set some state when the "refetch" button was clicked, and then check for it in the onSuccess and onError callbacks in useQuery to trigger the notification, but because I have a custom hook for this query which is used in different components, those callbacks fire multiple times which would cause multiple notifications to appear.

What's the recommended approach for doing something like this?

Simple example: Codesandbox

[TkDodo]

you can either await the refetch and then show the notification, or you use the global callbacks:

• https://tanstack.com/query/v4/docs/reference/QueryCache#global-callbacks
• https://tkdodo.eu/blog/react-query-error-handling#showing-error-notifications

[ernes-to]

Thank you @TkDodo