feat: add reset error boundary component

[boschni]

Because error boundaries are only applicable to a certain a tree, I think it would be good if the error reset would also only be applicable to that specific tree.

The ReactQueryResetErrorBoundary component enables this functionality, while allowing users to keep their own error boundary component. This does mean users will need to wrap their queries in two boundaries. We could streamline this by providing a ReactQueryErrorBoundary component similar to react-error-boundary. But maybe there are arguments against this?

This change should be backwards compatible and would allow us to remove queryCache.resetErrorBoundaries() and query.state.throwInErrorBoundary in v3 to make the core less knowledgable about React.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/8aildygxh
✅ Preview: https://react-query-git-fork-boschni-feature-error-boundary.tannerlinsley.vercel.app

[tannerlinsley]

Conflicts ;)

[boschni]

Ah yes will resolve those. What is your thought on a ‘ReactQueryErrorBoundary’ vs ‘ReactQueryResetErrorBoundary’?

[tannerlinsley]

So I think my main argument against what's happening here is that React Query isn't an error boundary component and by providing one would be diverging from the ecosystem (most people just use react-error-boundary or have their own. I 100% agree that people want to capture/reset errors for specific parts of their app, but doesn't that just mean that they will use multiple instances of their chosen error boundary component?

That said... we would need a reliable way to know which queries to reset for a specific tree... so thus, we need a wrapper component 😂

All that said, I think we should totally ship a component, but do as much as we can to show people how to reliably integrate it with a real error boundary component.

And that brings me to the name. It's not really an error boundary. It's a query resetter. So maybe something like ReactQueryResetBoundary?

[boschni]

Fair enough! Users can always create their own error boundary wrapper which also includes a react query error reset boundary :)

[tannerlinsley]

🎉 This PR is included in version 2.16.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[kentcdodds]

This busted https://github.com/kentcdodds/bookshelf

Here's the PR upgrading to this version of react-query@2.16.0: kentcdodds/bookshelf#69

Note that the latest version is broken as well. This is just the first version that triggered an issue.

Let me know if you'd like me to open a new issue about this regression.

[boschni]

@kentcdodds the functionality seems to work in the app itself and the tests pass if I disable the "can edit a note" test. Could there be a race condition in the tests?

[kentcdodds]

Indeed. I thought I could reproduce it in the app but turns out that's not the case. It's tests only. I'm going to investigate and even better I'll try to reproduce this in react-query's tests so we avoid breakages like this in the future :)