Is it possible to disable the global error only for specific requests of query, mutation?

[hoo00nn]

Hello, Team react-query.

Thank you for providing a good library. I'm using it well.

However, I have some concerns while using it. Currently, I am handling errors for API requests globally in the QueryClient for query and mute requests.

Below are some of the codes I use.

new QueryClient({
    queryCache: new QueryCache({
      onError: (err) => errorHandler(err),
    }),
    mutationCache: new MutationCache({
      onError: (error, _, _) =>  errorHandler(error)
    }),
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: false,
      },
      mutations: {
        retry: false,
      },
    },

The problem I've experienced here is that I want to deal with errors customarily for specific requests.

When sending query, mutation requests, I expected that adding onError to options would be an override, but it was not.

Is there a way to handle the error I want instead of the global error in a particular request by passing it to the options in useMation?

I need your help. Please help me. 😭

[cyjo9603]

Oh, I'm having the same problem as you. 😭

[TkDodo]

When sending query, mutation requests, I expected that adding onError to options would be an override, but it was not.

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

So I would stick to the global handler on the queryCache / mutationCache. Those handlers do get the whole query / mutation passed as the second parameter, so you can decide to not handle something for a specific key. Also, you can use the meta field on query/mutation to "tag" it in some way. This field is also available. For example, you could only show errors for queries that have a message passed:

const queryClient = new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        if (query.meta.message) {
         handleError(query.meta.message, error)
       }
      }
    }),

usage:

useQuery(key, fn, { meta: { message: "some message here" }})

this is just an example. meta can contain anything, so also boolean flags like shouldBeHandledByGlobalErrorHandler: false would do :)

[hoo00nn]

@TkDodo Thank you for your kind reply.

Thank you again for creating a good library.

[palmmymumu]

@TkDodo Seem like meta option isn't working with MutationCache unlike QueryCache ?

[TkDodo]

@TkDodo Seem like meta option isn't working with MutationCache unlike QueryCache ?

what does "not working" mean? Please be more specific

[goacgras]

@TkDodo I try to use meta at my useMutation

nothing here

Could you please explain how to use this meta, so that I can have some sortof tag at my global error handler

[TkDodo]

please look at the typescript types to see what the onError gets passed for the MutationCache:

query/packages/query-core/src/mutationCache.ts

Lines 14 to 19 in 39a4f05

	onError?: (
	error: DefaultError,
	variables: unknown,
	context: unknown,
	mutation: Mutation<unknown, unknown, unknown>,
	) => Promise<unknown> | unknown

meta is in the mutation, so mutation.meta

[palmmymumu]

@TkDodo Seem like meta option isn't working with MutationCache unlike QueryCache ?

what does "not working" mean? Please be more specific

In MutationCache onSuccess or onError callback, on 2nd parameter query it doesn't have meta ?

[TkDodo]

the mutationCache callbacks don't get a Query passed (obviously). it's right there in the typescript types, so use typescript:

query/packages/query-core/src/mutationCache.ts

Lines 14 to 19 in 13b17ee

	onError?: (
	error: DefaultError,
	variables: unknown,
	context: unknown,
	mutation: Mutation<unknown, unknown, unknown>,
	) => Promise<unknown> | unknown

the parameters are

onError: (error, variables, context, mutation) => ...

so tl;dr: use the 4th parameter ...

[hshoja]

For the sake of convenience, we have come to this approach to define a distinct hook for handling specific exceptions.

export const DEFAULT_QUERY_CLIENT_CONFIG: Readonly<QueryClientConfig> = {
  defaultOptions: { queries: {... } },
  queryCache: new QueryCache({
    onError: (error, query) => {
      const meta = query?.meta ?? {}
      if ('preventGlobalError' in meta && meta.preventGlobalError) {
        reportError(error)
        return
      }
      throw error
    },
  }),
}

export const useNonThrowingQuery = <
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  queryClient?: QueryClient,
): UseQueryResult<TData, TError> => {
  return useQuery<TQueryFnData, TError, TData, TQueryKey>(
    {
      meta: { preventGlobalError: true },
      ...options,
    },
    queryClient,
  )
}