useErrorBoundary is tied to suspense

[nielsdB97]

Just now I was trying to create a query that will trigger Suspense for a loading screen, but with custom error handling rather than using an error boundary.
However I noticed that just passing useErrorBoundary: false to this one specific query, to override the global setting, was not working as expected.
Checking the source I found that currently the useErrorBoundary option is tied to the suspense option, by checking if either is set to true.

Reproduction: https://codesandbox.io/s/react-query-suspense-without-error-boundary-cn6y6?file=/src/App.js
The problem is fixed by removing suspense: true from the queryClient options, since then the error boundary won't actually be used. However the Suspense fallback loading screen is then not shown.

Does it make sense to decouple these and allow for using Suspense for the loading state while opting out of using an error boundary?

[TkDodo]

I have never used suspense for data fetching. You can useErrorBoundary without suspense, but I don't think you can use suspense without ErrorBoundaries.

According to https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors, ErrorBoundaries are the way to handle errors with suspense ...

[Shaddix]

We also have use cases to use suspense for loading (to show global loading), but would like to handle errors within a component. So, it'd definitely be nice to decouple this

[TkDodo]

You can use ErrorBoundaries without suspense, but not suspense without error boundaries. It’s how Suspense is designed in react: https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors