Repository: tannerlinsley/react-query (ts)

Issue:
QueryErrorResetBoundary not rest when i have enabled option
**Describe the bug**
QueryErrorResetBoundary rest dont work with  useQuery has changable  'enabled' option,
I don't know if this is the correct behavior?

**To Reproduce**
just click try again button
[demolink](https://codesandbox.io/s/adoring-shape-vhbsv?file=/src/index.js)
![image](https://user-images.githubusercontent.com/35689628/141430500-7e488384-293f-412e-8273-4d2d88e3b96d.png)

**Expected behavior**
i hope queryfn recall when i reset 

**Desktop (please complete the following information):**

OS: MacOS
Browser: Chrome
Version: latest
Smartphone (please complete the following information):

**Smartphone (please complete the following information):**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser: [e.g. stock browser, safari]
 - Version: [e.g. 22]

**Additional context**
Add any other context about the problem here.



Pull request:
fix(useQuery): make sure that disabled queries in error state don't throw
fixes #2930 

one caveat is that the disabled query will be rendered with `status: 'error'`, because that's the state the query is in. Usually, with `useErrorBoundary`, you'd expect to _never_ see a query in error state. However, I think disabled queries can be in all resolved states (success, error, idle), so if you use `enabled`, that's what you get. This behaviour is documented with a separate test.

Patch:
diff --git a/src/react/useBaseQuery.ts b/src/react/useBaseQuery.ts
index 0736532ba..149d80320 100644
--- a/src/react/useBaseQuery.ts
+++ b/src/react/useBaseQuery.ts
@@ -131,6 +131,7 @@ export function useBaseQuery<
   // Handle error boundary
   if (
     result.isError &&
+    defaultedOptions.enabled !== false &&
     !result.isFetching &&
     shouldThrowError(
       defaultedOptions.suspense,


Test patch:
diff --git a/src/react/tests/QueryResetErrorBoundary.test.tsx b/src/react/tests/QueryResetErrorBoundary.test.tsx
index 50cf97a91..1ee596669 100644
--- a/src/react/tests/QueryResetErrorBoundary.test.tsx
+++ b/src/react/tests/QueryResetErrorBoundary.test.tsx
@@ -73,6 +73,137 @@ describe('QueryErrorResetBoundary', () => {
     consoleMock.mockRestore()
   })
 
+  it('should not throw error if query is disabled', async () => {
+    const key = queryKey()
+
+    let succeed = false
+    const consoleMock = mockConsoleError()
+
+    function Page() {
+      const { data, status } = useQuery(
+        key,
+        async () => {
+          await sleep(10)
+          if (!succeed) {
+            throw new Error('Error')
+          } else {
+            return 'data'
+          }
+        },
+        {
+          retry: false,
+          enabled: !succeed,
+          useErrorBoundary: true,
+        }
+      )
+      return (
+        <div>
+          <div>status: {status}</div>
+          <div>{data}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <QueryErrorResetBoundary>
+        {({ reset }) => (
+          <ErrorBoundary
+            onReset={reset}
+            fallbackRender={({ resetErrorBoundary }) => (
+              <div>
+                <div>error boundary</div>
+                <button
+                  onClick={() => {
+                    resetErrorBoundary()
+                  }}
+                >
+                  retry
+                </button>
+              </div>
+            )}
+          >
+            <Page />
+          </ErrorBoundary>
+        )}
+      </QueryErrorResetBoundary>
+    )
+
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
+    succeed = true
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('status: error'))
+
+    consoleMock.mockRestore()
+  })
+
+  it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
+    const key = queryKey()
+
+    let succeed = false
+    const consoleMock = mockConsoleError()
+
+    function Page() {
+      const [enabled, setEnabled] = React.useState(false)
+      const { data } = useQuery(
+        key,
+        async () => {
+          await sleep(10)
+          if (!succeed) {
+            throw new Error('Error')
+          } else {
+            return 'data'
+          }
+        },
+        {
+          retry: false,
+          enabled,
+          useErrorBoundary: true,
+        }
+      )
+
+      React.useEffect(() => {
+        setEnabled(true)
+      }, [])
+
+      return <div>{data}</div>
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <QueryErrorResetBoundary>
+        {({ reset }) => (
+          <ErrorBoundary
+            onReset={reset}
+            fallbackRender={({ resetErrorBoundary }) => (
+              <div>
+                <div>error boundary</div>
+                <button
+                  onClick={() => {
+                    resetErrorBoundary()
+                  }}
+                >
+                  retry
+                </button>
+              </div>
+            )}
+          >
+            <Page />
+          </ErrorBoundary>
+        )}
+      </QueryErrorResetBoundary>
+    )
+
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
+    succeed = true
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('data'))
+
+    consoleMock.mockRestore()
+  })
+
   it('should not retry fetch if the reset error boundary has not been reset', async () => {
     const key = queryKey()