Repository: tannerlinsley/react-query (ts)

Issue:
Query not refetching when enabled becomes 'true' and different instance is disabled
**Describe the bug**
I have 2 Components using the same query. At one point one instance changes the enabled flag to true while the other stays false. The query is not executed.

**To Reproduce**
I created a CodeSandbox: https://codesandbox.io/s/zen-almeida-g2o5z
Click the button to enable one of the queries => nothing happens. If you remove the <DisabledQuery /> component it works as expected.

**Expected behavior**
A query fetches when **any** instance is enabled.

Pull request:
fix: fetch query when any instance is enabled
This PR fixes #823.
In updateConfig some() was used in a way that doesn't make sense to me. I think this is the way it should be, but let me know if there is anything special about it.

Patch:
diff --git a/src/core/queryInstance.ts b/src/core/queryInstance.ts
index b737a726c..16519a06a 100644
--- a/src/core/queryInstance.ts
+++ b/src/core/queryInstance.ts
@@ -59,10 +59,10 @@ export class QueryInstance<TResult, TError> {
       ) {
         this.refetchIntervalId = setInterval(() => {
           if (
-            this.query.instances.some(_ => this.config.enabled) &&
+            this.query.instances.some(d => d.config.enabled) &&
             (isDocumentVisible() ||
               this.query.instances.some(
-                _ => this.config.refetchIntervalInBackground
+                d => d.config.refetchIntervalInBackground
               ))
           ) {
             this.query.fetch()
@@ -76,7 +76,7 @@ export class QueryInstance<TResult, TError> {
     try {
       // Perform the refetch for this query if necessary
       if (
-        this.query.config.enabled && // Don't auto refetch if disabled
+        this.query.instances.some(d => d.config.enabled) && // Don't auto refetch if disabled
         !this.query.wasSuspended && // Don't double refetch for suspense
         this.query.state.isStale && // Only refetch if stale
         (this.query.config.refetchOnMount || this.query.instances.length === 1)


Test patch:
diff --git a/src/react/tests/useQuery.test.tsx b/src/react/tests/useQuery.test.tsx
index 9802fb01f..97da66537 100644
--- a/src/react/tests/useQuery.test.tsx
+++ b/src/react/tests/useQuery.test.tsx
@@ -1007,4 +1007,31 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('{"a":"a"}'))
   })
+
+  it('should refetch if any query instance becomes enabled', async () => {
+    const queryFn = jest.fn().mockReturnValue('data')
+
+    function Disabled() {
+      useQuery('test', queryFn, { enabled: false })
+      return null
+    }
+
+    function Page() {
+      const [enabled, setEnabled] = React.useState(false)
+      const result = useQuery('test', queryFn, { enabled })
+      return (
+        <>
+          <Disabled />
+          <div>{result.data}</div>
+          <button onClick={() => setEnabled(true)}>enable</button>
+        </>
+      )
+    }
+
+    const rendered = render(<Page />)
+    expect(queryFn).toHaveBeenCalledTimes(0)
+    fireEvent.click(rendered.getByText('enable'))
+    await waitFor(() => rendered.getByText('data'))
+    expect(queryFn).toHaveBeenCalledTimes(1)
+  })
 })