centralizing errors

[rabieeali]

I want to centralize error with API calls, and some months ago I have been able to do the below code, why can't I do this any more?
and what can I do now? I do not want to do it for every query I write

import { QueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'


export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            onError: (err: unknown) => {
                if (err instanceof Error) {
                    toast(err.message)
                }
            }
        }
    }
})

[TkDodo]

So you updates to v5 and didn't read the migration guide? https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed

I mean the toast example is literally in the linked blogpost ...

[rabieeali]

Hi dear Maintainer!
I just couldn't find my answer, there was also a link that said "For a way to set a different kind of Error globally, see the TypeScript Guide."

I couldn't find the solution there as well, but the below code seems to do the job but I am not sure, I do not want handle errors for every api call (query/mutation)
I would be happy if you could tell me if I'm doing things right:

import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query'
import { toastErrorHandler } from 'src/lib/toastErrorHandler'

export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (err) => {
      console.log(err)
      const isValidShape = toastErrorHandler(err) // the shape of the errors should be as errors DTO: [key : string]
      if (typeof isValidShape !== 'undefined') {
        toastErrorHandler(err) // shows API validation messages as a toast
      }
    },
  }),
  mutationCache: new MutationCache({
    onError: (err) => {
      console.log(err)
      const isValidShape = toastErrorHandler(err)
      if (typeof isValidShape !== 'undefined') {
        toastErrorHandler(err)
      }
    },
  }),
})

[TkDodo]

yes, that's fine. Have you read the blogpost? Because everything is explained there ...