Fix PendingTasks for offline mode

Author: arnoud-dv

packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts

@@ -230,6 +230,54 @@ describe('PendingTasks Integration', () => {
       expect(query.data()).toMatch(/^data-\d+$/)
     })
 
+    test('should keep PendingTasks active when query starts offline (never reaches fetching)', async () => {
+      const app = TestBed.inject(ApplicationRef)
+
+      onlineManager.setOnline(false)
+
+      const query = TestBed.runInInjectionContext(() =>
+        injectQuery(() => ({
+          queryKey: ['start-offline'],
+          networkMode: 'online', // Default: won't fetch while offline
+          queryFn: async () => {
+            await sleep(10)
+            return 'online-data'
+          },
+        })),
+      )
+
+      // Allow query to initialize
+      await Promise.resolve()
+      await vi.advanceTimersByTimeAsync(0)
+
+      // Query should initialize directly to 'paused' (never goes through 'fetching')
+      expect(query.status()).toBe('pending')
+      expect(query.fetchStatus()).toBe('paused')
+
+      const stablePromise = app.whenStable()
+      let stableResolved = false
+      void stablePromise.then(() => {
+        stableResolved = true
+      })
+
+      await Promise.resolve()
+
+      // PendingTasks should block stability even though we never hit 'fetching'
+      expect(stableResolved).toBe(false)
+
+      // Bring the app back online so the query can fetch
+      onlineManager.setOnline(true)
+
+      await vi.advanceTimersByTimeAsync(20)
+      await Promise.resolve()
+
+      await stablePromise
+
+      expect(stableResolved).toBe(true)
+      expect(query.status()).toBe('success')
+      expect(query.data()).toBe('online-data')
+    })
+
     test('should keep PendingTasks active while query retry is paused offline', async () => {
       const app = TestBed.inject(ApplicationRef)
       let attempt = 0

packages/angular-query-experimental/src/create-base-query.ts

@@ -45,6 +45,21 @@ export function createBaseQuery<
     TQueryKey
   > | null = null
 
+  let taskCleanupRef: (() => void) | null = null
+
+  const startPendingTask = () => {
+    if (!taskCleanupRef) {
+      taskCleanupRef = pendingTasks.add()
+    }
+  }
+
+  const stopPendingTask = () => {
+    if (taskCleanupRef) {
+      taskCleanupRef()
+      taskCleanupRef = null
+    }
+  }
+
   /**
    * Signal that has the default options from query client applied
    * computed() is used so signals can be inserted into the options
@@ -111,18 +126,14 @@ export function createBaseQuery<
     }
 
     observer = new Observer(queryClient, options)
-    let taskCleanupRef: (() => void) | null = null
 
     const unsubscribe = observer.subscribe(
       notifyManager.batchCalls((state) => {
         ngZone.run(() => {
-          if (state.fetchStatus === 'fetching' && !taskCleanupRef) {
-            taskCleanupRef = pendingTasks.add()
-          }
-
-          if (state.fetchStatus === 'idle' && taskCleanupRef) {
-            taskCleanupRef()
-            taskCleanupRef = null
+          if (state.fetchStatus !== 'idle') {
+            startPendingTask()
+          } else {
+            stopPendingTask()
           }
 
           if (
@@ -146,7 +157,7 @@ export function createBaseQuery<
     )
     destroyRef.onDestroy(() => {
       unsubscribe()
-      taskCleanupRef?.()
+      stopPendingTask()
     })
   }