feat: add reset error boundary component

Author: boschni

docs/src/pages/docs/guides/suspense.md

@@ -43,23 +43,36 @@ In addition to queries behaving differently in suspense mode, mutations also beh
 
 ## Resetting Error Boundaries
 
-Whether you are using **suspense** or **useErrorBoundaries** in your queries, you will need to know how to use the `queryCache.resetErrorBoundaries` function to let queries know that you want them to try again when you render them again.
+Whether you are using **suspense** or **useErrorBoundaries** in your queries, you will need to know how to use the `ReactQueryResetErrorBoundary` component to let queries within this boundary know that you want them to try again when you render them again.
+
+There are two ways to trigger a reset:
+
+1. By providing a function as a child of `ReactQueryResetErrorBoundary`. The first argument will be an object with a `reset` function.
+2. By using the `useResetErrorBoundary()` hook. The returned value will be an object with a `reset` function.
 
 How you trigger this function is up to you, but the most common use case is to do it in something like `react-error-boundary`'s `onReset` callback:
 
 ```js
-import { queryCache } from "react-query";
-import { ErrorBoundary } from "react-error-boundary";
-
-<ErrorBoundary
-  onReset={() => queryCache.resetErrorBoundaries()}
-  fallbackRender={({ error, resetErrorBoundary }) => (
-    <div>
-      There was an error!
-      <Button onClick={() => resetErrorBoundary()}>Try again</Button>
-    </div>
-  )}
->
+import { ReactQueryResetErrorBoundary } from 'react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+const App: React.FC = () => (
+  <ReactQueryResetErrorBoundary>
+    {({ reset }) => (
+      <ErrorBoundary
+        onReset={reset}
+        fallbackRender={({ error, resetErrorBoundary }) => (
+          <div>
+            There was an error!
+            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>
+    )}
+  </ReactQueryResetErrorBoundary>
+)
 ```
 
 ## Fetch-on-render vs Render-as-you-fetch

src/react/ReactQueryResetErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+interface ReactQueryResetErrorBoundaryValue {
+  isReset: boolean
+  reset: () => void
+}
+
+export interface ReactQueryResetErrorBoundaryProps {
+  children:
+    | ((value: ReactQueryResetErrorBoundaryValue) => React.ReactNode)
+    | React.ReactNode
+}
+
+const context = React.createContext<ReactQueryResetErrorBoundaryValue>({
+  isReset: false,
+  reset: () => undefined,
+})
+
+export const useResetErrorBoundary = () => React.useContext(context)
+
+export const ReactQueryResetErrorBoundary: React.FC<ReactQueryResetErrorBoundaryProps> = ({
+  children,
+}) => {
+  const [isReset, setIsReset] = React.useState(false)
+  const reset = React.useCallback(() => {
+    setIsReset(true)
+  }, [])
+  const value = React.useMemo(() => ({ isReset, reset }), [isReset, reset])
+  return (
+    <context.Provider value={value}>
+      {typeof children === 'function'
+        ? (children as Function)(value)
+        : children}
+    </context.Provider>
+  )
+}

src/react/index.ts

@@ -3,6 +3,10 @@ export {
   useQueryCache,
 } from './ReactQueryCacheProvider'
 export { ReactQueryConfigProvider } from './ReactQueryConfigProvider'
+export {
+  ReactQueryResetErrorBoundary,
+  useResetErrorBoundary,
+} from './ReactQueryResetErrorBoundary'
 export { useIsFetching } from './useIsFetching'
 export { useMutation } from './useMutation'
 export { useQuery } from './useQuery'
@@ -15,3 +19,4 @@ export type { UseInfiniteQueryObjectConfig } from './useInfiniteQuery'
 export type { UsePaginatedQueryObjectConfig } from './usePaginatedQuery'
 export type { ReactQueryCacheProviderProps } from './ReactQueryCacheProvider'
 export type { ReactQueryConfigProviderProps } from './ReactQueryConfigProvider'
+export type { ReactQueryResetErrorBoundaryProps } from './ReactQueryResetErrorBoundary'

src/react/tests/suspense.test.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { sleep, queryKey, mockConsoleError } from './utils'
 import { useQuery } from '..'
 import { queryCache } from '../../core'
+import { ReactQueryResetErrorBoundary } from '../ReactQueryResetErrorBoundary'
 
 describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
@@ -192,6 +193,73 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
+  it('should retry fetch if the reset error boundary has been reset', async () => {
+    const key = queryKey()
+
+    let succeed = false
+    const consoleMock = mockConsoleError()
+
+    function Page() {
+      useQuery(
+        key,
+        async () => {
+          await sleep(10)
+
+          if (!succeed) {
+            throw new Error('Suspense Error Bingo')
+          } else {
+            return 'data'
+          }
+        },
+        {
+          retryDelay: 10,
+          suspense: true,
+        }
+      )
+
+      return <div>rendered</div>
+    }
+
+    const rendered = render(
+      <ReactQueryResetErrorBoundary>
+        {({ reset }) => (
+          <ErrorBoundary
+            onReset={reset}
+            fallbackRender={({ resetErrorBoundary }) => (
+              <div>
+                <div>error boundary</div>
+                <button
+                  onClick={() => {
+                    succeed = true
+                    resetErrorBoundary()
+                  }}
+                >
+                  retry
+                </button>
+              </div>
+            )}
+          >
+            <React.Suspense fallback={'Loading...'}>
+              <Page />
+            </React.Suspense>
+          </ErrorBoundary>
+        )}
+      </ReactQueryResetErrorBoundary>
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('error boundary'))
+
+    await waitFor(() => rendered.getByText('retry'))
+
+    fireEvent.click(rendered.getByText('retry'))
+
+    await waitFor(() => rendered.getByText('rendered'))
+
+    consoleMock.mockRestore()
+  })
+
   it('should not call the queryFn when not enabled', async () => {
     const key = queryKey()
 

src/react/useBaseQuery.ts

@@ -4,12 +4,15 @@ import { useRerenderer } from './utils'
 import { QueryObserver } from '../core/queryObserver'
 import { QueryResultBase, QueryObserverConfig } from '../core/types'
 import { useDefaultedQueryConfig } from './useDefaultedQueryConfig'
+import { useResetErrorBoundary } from './ReactQueryResetErrorBoundary'
 
 export function useBaseQuery<TResult, TError>(
   config: QueryObserverConfig<TResult, TError> = {}
 ): QueryResultBase<TResult, TError> {
   config = useDefaultedQueryConfig(config)
 
+  const resetBoundary = useResetErrorBoundary()
+
   // Make a rerender function
   const rerender = useRerenderer()
 
@@ -39,7 +42,11 @@ export function useBaseQuery<TResult, TError>(
   if (config.suspense || config.useErrorBoundary) {
     const query = observer.getCurrentQuery()
 
-    if (result.isError && query.state.throwInErrorBoundary) {
+    if (
+      result.isError &&
+      !resetBoundary.isReset &&
+      query.state.throwInErrorBoundary
+    ) {
       throw result.error
     }