How to globally handle error for all react queries at once and refetch?

Question

I would like to handle, for example, expired access token error for all queries that currently running in my react app.

1. I need to catch expired access token error globaly
2. cancel other queries which soon will throw same error
3. Update access token in context
4. Invalidate all failed/canceled queries and refetch with new access token.

Is there a way to do it provided by React Query? Could you show simple example how to achieve that?

Unanimity

Create a Wrapper over useQuery and handle your custom logic there. – Gayegayel

@RohitKhanna I need to handle errors globally for whole app, not only for one useQuery hook – Huzzah

Especially when I use useQueries so several queries are running simultaneously and new access token has to be synchronised – Huzzah

Answer 1

React Query has global event handlers on the level of the QueryCache and MutationCache, that are created with your QueryClient:

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

those event handlers will be called once per query / mutation, for each query / mutation.

see also:

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

Isomagnetic