Setting an ErroHandler for all queries

[cubecleveland]

Hello,

I have a use case where i want to catch an Error in every single query,.
Bascailly when the api token is wrong i want the user to be redirected to the login screen.
Is there any way to set Defaults for every single mutation and query, or is there a way to get the isError object globally ?

[TkDodo]

you can use the onError property globally in the defaultOptions of the queryClient, but if you override this on a query, it will not be called. For an error handler that is always called, not matter what, you have to put it on the queryCache:

new QueryClient({
    queryCache: new QueryCache({ onError: (error) => ... }),
})

this is documented here: https://react-query.tanstack.com/reference/QueryCache

[cubecleveland]

This is exactly what I needed.
Here is my code if it helps anyone else.

const queryClient = new QueryClient({
queryCache: new QueryCache({
onError: (error) => {
// do whatever
} }),

 mutationCache: new MutationCache({ 
  onError: (error) => { 

//do whatever
} }),
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
}})

Many thanks.

[cubecleveland]

Quick follow up on this...
I was actually trying to use history.push on a specific error, but now came to realzie that this is done outside any scope so hooks are not really allowed, do u knwo of any way i can achieve that on a global handler ?

[TkDodo]

so I think you can just export the history from react-router that your are passing tp your Router, and then import it and use it as-is. useHistory just accesses the history object that is passed through react-context, and you can also access this from outside of react.

that being said, if you need to use hooks in those callbacks, you can create the QueryClientProvider inside of your App component, but make sure you stabilize it correctly (NOT useMemo, useState or useRef). I have a blog post about this here: https://tkdodo.eu/blog/use-state-for-one-time-initializations and I use it like this to e.g. show an error toast for all errors globally:

export const App = () => {
    const toast = useToast()
    const [queryClient] = React.useState(() => {
        const errorConfig = {
            onError: (error) => {
                  toast.show({
                       text: error.message,
                       variant: 'danger',
                  })
              }
        }

        return new QueryClient({
            queryCache: new QueryCache(errorConfig),
            mutationCache: new MutationCache(errorConfig),
        })
    })

    return (
        <QueryClientProvider client={queryClient}>
            <Example />
            <ReactQueryDevtools />
        </QueryClientProvider>
    )
}

[cubecleveland]

Im almost there:
having issue understanding how u are using useToast in your code..
Isnt useToast suppost to be a provider that will be only accesible in the app itself ?

[TkDodo]

Yes, on this example, you’d need a ToastProvider around the App component.

[cubecleveland]

You are amazing. Thanks for all your help in this. CUBE Workspace Corporate: 6240 Som Center Rd #130 Solon, OH 44139 T: 216.245.9629

…

On Mon, Apr 19, 2021 at 12:57 AM Dominik Dorfmeister < ***@***.***> wrote: Yes, on this example, you’d need a ToastProvider around the App component. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2139 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMKORZXOXQSML7O6SHL6OE3TJOZ33ANCNFSM43BZCVLA> .