Question Adbout Global Error Handlers

[stephen-liu-fipo]

AFAIK, there are six places to handle errors for query and mutation

function handleError(error: unknown) {}

new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      if (query?.meta?.handleErrorLocal) {
        return
      }
      handleError(error) // option#1
    }
  }),
  defaultOptions: {
    queries: {
      onError: handleError // option#2
    },
    mutations: {
      onError: handleError // option#3
    }
  },
  mutationCache: new MutationCache({
    onError: (error, variables, context, mutation) => {
      handleError(error) // option#4
    }
  })
})
const { data } = useQuery({
  queryFn: async () => {
    /*..*/
  },
  queryKey: [
    /*..*/
  ],
  onError: handleError, // option#5
  meta: { handleErrorLocal: true }
})
const update = useMutation({
  mutationFn: () => {
    /*..*/
  },
  onError: handleError // option#6
})

I have read other discusions about this topic. In #3441

onError added to useQuery will overwrite the one passed to defaultOptions. However, those error handlers will be executed for every observer (=useQuery instance).

So my first question is, what exactly is this observer in those error handlers will be executed for every observer (=useQuery instance).. and whats does this means to the UI?

in https://tkdodo.eu/blog/react-query-error-handling#putting-it-all-together

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      // 🎉 only show error toasts if we already have data in the cache
      // which indicates a failed background update
      if (query.state.data !== undefined) {
        toast.error(`Something went wrong: ${error.message}`)
      }
    },
  }),
})

My Second question is, why only show error toasts if we already have data in the cache . In this case, there would be no toast in the first request, am I right? What's the difference between option#3?

Finally, what I want to achieve is this: handle both query request error and mutation request error, locally or globally, depending on the specific requirement.

My attempt is this:

function handleError() { /* showToast */}

<QueryClientProvider
  client={
    new QueryClient({
      queryCache: new QueryCache({
        onError: (error, query) => {
          if (query?.meta?.local) {
            return
          }
          handleError(error)
        }
      }),
      mutationCache: new MutationCache({
        onError: (error, variables, context, mutation) => {
          // If this mutation has an onError defined, skip this
          if (mutation.options.onError) return
          handleError(error)
        }
      })
    })
  }
>
</QueryClientProvider>

function handleError() { /* showToast */}

const { data: tableData } = useQuery({
  queryFn: async () => {},
  onError: handleError,
  meta: { local: true }
})

const mutation = useMutation({
  mutationFn: () => {},
  onError: handleError()
})

Am I doing it right? If not correct, what's the drawback of this solution, and how should I improve this?
Thank YOU!

[louis-young]

Hi 👋

As far as I'm aware the options for error handling are:

1. Query cache options.
2. Mutation cache options.
3. Query client default query options.
4. Query client default mutation options.
5. useQuery options.
6. useMutation options.
7. useMutation mutation function options.

So my first question is, what exactly is this observer in those error handlers will be executed for every observer (=useQuery instance).. and whats does this means to the UI?

I think the observers are the useQuery instances. This means that if you define the callback at query hook level and have multiple instances of the hook, then the callback will execute once per observer, which could be undesirable.

My Second question is, why only show error toasts if we already have data in the cache . In this case, there would be no toast in the first request, am I right? What's the difference between option#3?

This is an example demonstrating how to show error notifications if background refetches fail. If the first request is erroneous and there's no data in the cache then there would be no notification. The difference between option 3 (the query client default mutation option) is that this would show an error notification for every erroneous request, not just background refetches.

Finally, what I want to achieve is this: handle both query request error and mutation request error, locally or globally, depending on the specific requirement.

That looks reasonable to me 🙂

Hopefully this helps!