Callback on pause of any mutation or query

[alexanderdavide]

My desired offline implementation is

• showing an error component if cache is empty
• displaying a toast whenever a mutation/query pauses the first time or any subsequent time while keeping the stale data intact

Having achieved the first aspect using conditional rendering on pause and no data, I'm looking for something like a global onPause callback for the second. It's possible to achieve this by repeating if (isPaused) showToast() for every mutation/query but obviously it's a lot of boilerplate.

I already thought about adding a global request wrapper that checks onlineManager.isOnline(), shows the toast and then let's the request execute which should then run into paused state. However, if possible I'd prefer to act upon React Query's paused state. Also, the global request wrapper would probably not work with invalidation of already paused mutations/queries, for instance when a user repeatedly makes use of a list's control refresh, because the function isn't called anymore.

I'd appreciate any help!

[TkDodo]

I think one way to do this in user-land is to setup a global subscription to the QueryCache, then act on the passed action:

React.useEffect(() => {
  return queryClient.getQueryCache().subscribe(event => {
    if (event.type === 'updated' && event.action.type === 'pause') {
      showToast()
    }
  })
}, [queryClient])

[alexanderdavide]

Awesome, that's it. Thank you!

[joaopedrodcf]

For those that land here and want to do this with the V5 with mutations for example:

    useEffect(() => {
        return queryClient.getMutationCache().subscribe((event) => {
            if (event.mutation?.state.isPaused) {
              showToast()
            }
        });
    }, [queryClient]);