Ability to subscribe to global events (like onError) in child components

[Svish]

As far as I've understood, the only way to access global events (like onError) is to configure it when creating the QueryCache and the MutationCache.

    const queryClient = new QueryClient({
      queryCache: new QueryCache({ onError }),
      mutationCache: new MutationCache({ onError }),
    });

This means there's no way for child components to hook into these events, which could be useful. For example, my use-case is that I would like to trigger the showing of a "You've been logged out"-modal when anything fails with a 401 status. I currently do this via dispatching a Redux action which sets a "loggedOut" flag on the global Redux state. But we're trying to eventually get rid of Redux, and preferably I don't really want a global state flag like that at all.

Preferably, I would just like to be able to add a subscription to onError somehow, in whatever component I feel like, as long as it is within the QueryClientProvider. Also find it a bit strange that there's no global onError event, like why is it split between query and mutation? That's a bit confusing to me. I'd like to be able to add a single subscription somehow to get error events for everything.

Something like this, maybe?

const client = useQueryClient()

useEffect(() => {
  const unsubscribe = client.subscribe('error', someErrorHandler);
  return unsubscribe;
}, [client])

Maybe even allow subscribing to other statuses like 'success' and 'loading' as well?

It seems I can set useQueryClient().getQueryCache().config.onError to something anywhere, but I very much assume it will override any other error handlers, and have no way of unsubscribing either.

[TkDodo]

For example, my use-case is that I would like to trigger the showing of a "You've been logged out"-modal when anything fails with a 401 status

the global cache callbacks are perfect for this, e.g.:

const onError = (error: unknown) => {
  if (axios.isAxiosError(error) && error.response.status === 401) {
    showToast("You have been logged out")
  }
}

const queryClient = new QueryClient({
  queryCache: new QueryCache({ onError }),
  mutationCache: new MutationCache({ onError }),
});

if you want this only for some components, you can check the query key / mutation key inside that handler, as it gets that passed as well, or check the meta field, which allows you to add arbitrary information to each query, so that you can tag the ones that should display something for example.

[Svish]

The problem is that you then need access to the showToast function when you initially create the QueryCache, which in my case it's kind of not. I made it work via a temporary hack, but it was not a good way to do it, and it will need to be changed later.

Would be so much better if I didn't have to hack on the client initialization at all, and instead could add a subscription further down the line.

One solution could be if the already existing subscribe callback on QueryCache and MutationCache would be notified of errors as well, and not just successful updates. Maybe via an opt-in option, to not break existing code, I don't know. 🤷‍♂️

[TkDodo]

The problem is that you then need access to the showToast function when you initially create the QueryCache, which in my case it's kind of not.

can you explain why that is an issue?

it is okay to call useQueryClient().getQueryCache().config.onError, because there is only one global error handler per cache. It doesn't affect onError callbacks on consumer (useQuery) level.

One solution could be if the already existing subscribe callback on QueryCache and MutationCache would be notified of errors as well, and not just successful updates

it should be notified of all updates to the cache. The devtools use those subscriptions, and if errors wouldn't be propagated, we would never see erroneous queries in the devtools. A message of type observerResultsUpdated should be emitted even in case of errors.

[Svish]

We have gathered the setup of the QueryClientProvider in a wrapper component that is shared across several separate React apps. And in reality, the setup of global error handling and such varies a bit between each app, and it's setup "further down" the component tree.

Because of this, I've now had to make some assumptions in the common wrapper about what's going on "outside", that I'd rather not. It "works" now, but I don't like the solution.

I could make the wrapper more general by passing a callback into it from each app, but I would still have to restructure those apps a bit, because the component that actually "listens" for this "event" is further down the component tree. The communication now happens via a redux action dispatch, but we're planning to get rid of redux, and I would rather both the provider wrapper component, and where the setup happens "on the top" not have to know about the existence of redux at all.

[Svish]

it should be notified of all updates to the cache. The devtools use those subscriptions, and if errors wouldn't be propagated, we would never see erroneous queries in the devtools. A message of type observerResultsUpdated should be emitted even in case of errors.

Thank you, I'll look into if that will trigger "enough events" for us to replace the current implementation with the global callbacks . 👍

[Svish]

So, it's a bit awkward, but I guess the only way to subscribe to global events, after the client and caches have already been created, is to subscribe individually to the QueryCache and the MutationCache, and then sort out the type of event you're after manually.

An example looking for a certain kind of error, UnauthorizedError:

function useIsUnauthorized(): boolean {
  const [isUnauthorized, toggle] = useReducer(() => true, false);

  const client = useQueryClient();

  // Query Cache subscription
  useEffect(
    () =>
      client.getQueryCache().subscribe((event) => {
        if (
          event?.type === 'queryUpdated' &&
          event.action.type === 'error' &&
          event.action.error instanceof UnauthorizedError
        ) {
          toggle();
        }
      }),
    [client]
  );

  // Mutation Cache subscription
  useEffect(
    () =>
      client.getMutationCache().subscribe((mutation) => {
        if (mutation?.state.error instanceof UnauthorizedError) {
          toggle();
        }
      }),
    [client]
  );

  return isUnauthorized;
}

Could probably be wrapped up in a more generic useErrorSubscription(callback: (error: unknown) => void) hook, or something like that though, which would make it more nice.

[7amou3]

The toggle() function triggers twice in my case, any idea how to avoid that? thanks