fix: fetch query when any instance is enabled (TanStack#827)

Author: bviebahn

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)

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)
+  })
 })