Add a way to differentiate between a query Error and a different error.

[ghost]

Why

// https://react-query.tanstack.com/reference/useQueryErrorResetBoundary
 const App: React.FC = () => {
   const { reset } = useQueryErrorResetBoundary()
   return (
     <ErrorBoundary
       onReset={reset}
       fallbackRender={({ resetErrorBoundary }) => (
         <div>
           There was an error!
           <Button onClick={() => resetErrorBoundary()}>Try again</Button>
         </div>
       )}
     >
       <Page />
     </ErrorBoundary>
   )
 }

Current recommended solution when using useQueryErrorResetBoundary can't differentiate between a query error and a regular error in the child component. There might be an error which isn't related to the query, the queries might have succeeded, but if we follow the documentation the action suggested by the app is to reset queries.

Suggestion

Add a way to differentiate between a query Error and a different error.

What a solution might look like

 const App: React.FC = () => {
   const { reset, isQueryError } = useQueryErrorResetBoundary()
   return (
     <ErrorBoundary
       onReset={reset}
       fallbackRender={({ resetErrorBoundary }) => (
         <div>
           There was an error!
           {
               isQueryError?( 
                   <>
                       Please make sure you are connected to the internet. 
                       <Button onClick={() => resetErrorBoundary()}>Try again</Button>
                   </>
               ) : (
                   <Button onClick={() => reportError()}>Report error</Button>
               )
           }
         </div>
       )}
     >
       <Page />
     </ErrorBoundary>
   )
 }

With isQueryError we can offer the most relevant and effective course of action.

[TkDodo]

I'm not sure how a queryError would look like. react-query doesn't actually know about your errors, which is why the Error type also defaults to unknown. Your queryFn could throw 5, and then the Error would be of type number. There is sadly no way to differentiate automatically, because RQ is very agnostic to how fetching works - it only needs a promise, resolved or rejected.

What you can do on your side is to wrap your queryFn, catch all the errors and wrap them. If you use axios, you will automatically get an AxiosError from axios, which you can check for at runtime. Manually, it would look something like this:

useQuery(key, async () => {
  try {
    return fetchData()
  } catch(e) {
    throw { isQueryError: true, error: e }
  }
})

that way, your queryErrors will be an object with the isQueryError boolean set to true, which you can check. Of course, you can also create a class that extends Error or whatever you want to throw.