Grabbing the query Key when using defaultOption's onError?

[mauriciosoares]

Hi, I'll try to explain my question with an example:

Let's assume I have the following query:

  const { ... } = useQuery('fetchTodos', api.fetchTodos)

And I have configured the defaultOptions on the QueryClient like to have an onError global callback:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: err => {
        // handle error
      },
    },
  },
})

Is there any way to grab the key fetchTodos inside the onError? If not, is this something you think it's worth implementing? My plan is to log these errors on our error tracking tool, and I'd like to prefix these logs with the type of request that just failed...

[TkDodo]

What you probably want to do is use the onError callback on the queryCache rather than the defaultOptions for queries. This has two reasons:

1. default options only work if they are not overwritten. If your useQuery hook specifies their own onError, to e.g. show a toast error notification, you won't track the error. There is no chaining here.
2. This onError callback will be called for each observer, so if you have two queries with the same key, it will be called twice and thus tracked twice.

The callback on the queryCache solves this. It will only be called once per cache entry, and it also receives the whole query as second parameter, which also has the key:

see: https://react-query.tanstack.com/reference/QueryCache

const queryClient = new QueryClient({
  queryCache: new QueryCache({
   onError: (error, query) => {
     console.log(error, query.queryKey)
   },
 })
})

[mauriciosoares]

Thank you @TkDodo for the super quick response, and the detailed explanation, that indeed solves my problem. ❤️

[TkDodo]

we should probably make this more clear in the docs. Could you PR it?

[mauriciosoares]

To be honest, the link you sent is pretty clear, that the option onError receives a query parameter. I mean this dude right here:

The only problem is that it's not clear what are the available data from this Query parameter, and I have just started working with react query, so I'm not too confident to document what we can use from that param and what we can not...