Option to cache errors

[CreativeTechGuy]

Describe the bug
Some errors from APIs are non-retryable and should be cached. When they are not, then the component will try to continuously re-make the call every time a component is mounted even though we know that it'll fail again. Depending on the structure of the app this could create infinite loops in the worst case or make tons of unnecessary API calls in the most likely case.

To Reproduce
Steps to reproduce the behavior:

1. Create a component that uses useQuery and returns an error.
2. Unmount that component and re-mount that component.
3. useQuery will retry and get the same error.

Expected behavior
There should be a query option to cache errors. Either a boolean to indicate that all errors should be cached using the normal rules, but also a function which is passed the error and can return true/false to indicate if that specific error should be cached. (So a user can differentiate between a non-retryable error and a retryable error.)

Screenshots
N/A

Additional context
N/A

[TkDodo]

You could catch your error in the queryFn and transform it to a resolved promise in case of an error you’d like to cache, and re-throw all other errors, but the error will then show up in data, so you’d have to model your structure accordingly.

you can also implement the retry function to prevent retries for certain errors.

converting this to a discussion because it’s a feature request, not a bug. We can definitely keep discussing there :)

[CreativeTechGuy]

@TkDodo Your lightweight wrapper is similar to what I'm looking for except I still want to use the useQuery response even when disabled. I'd still need access to that error object and the status of that query. And furthermore, when another component across the app makes a change and invalidates the cache of this query, I'd like it to now retry as it's been cleared from the cache. In your example, I'd need a way to communicate to the setEnabled state that the cache has been cleared and re-enable the query.

Maybe the bug here is related to the refetch* config options? If I have refetchOnMount: false I'd expect that to not refetch at all on mount but it still does when there was an error.

---

To answer this specific question:

what should happen then if i have a "cached" error?

I'd say it should behave the same as cached data. Any other component in the app will not refetch that same query and will instantly get the .error property and .isError set. Only when the cacheTime or staleTime is up, an option like refetchOnWindowFocus is set to true, or the cache is cleared for that key should it refetch. This is the exact behavior that useQuery has for .data today, I'd like the option to apply all of that behavior to .error conditionally too. :)

[TkDodo]

@boschni today I learned about retryOnMount 😅 👍

[CreativeTechGuy]

Can someone please document retryOnMount? I feel like the QueryClient configs are not well documented at all. That seems to do exactly what I need but that's totally news to me!

Can I make a request to document all of the QueryClient args here: https://react-query.tanstack.com/reference/QueryClient

[TkDodo]

Yes, please go ahead and PR it. It should go here: https://react-query.tanstack.com/reference/useQuery

Next to refetchOnMount or so. This is what the types have to say about it:

  /**
   * If set to `false`, the query will not be retried on mount if it contains an error.
   * Defaults to `true`.
   */
  retryOnMount?: boolean

[CreativeTechGuy]

I'll add that to my TODO list for tomorrow. It's the middle of the night for me.

Thanks for all of your help folks! Good to know that it already does what I'm looking for, just undocumented. 😂