Fix isRestoring() handling

Author: arnoud-dv

examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts

@@ -30,30 +30,25 @@ export class ExampleComponent {
   }))
 
   readonly nextButtonDisabled = computed(
-    () => !this.#hasNextPage() || this.#isFetchingNextPage(),
+    () => !this.query.hasNextPage() || this.query.isFetchingNextPage(),
   )
 
   readonly nextButtonText = computed(() =>
-    this.#isFetchingNextPage()
+    this.query.isFetchingNextPage()
       ? 'Loading more...'
-      : this.#hasNextPage()
+      : this.query.hasNextPage()
         ? 'Load newer'
         : 'Nothing more to load',
   )
 
   readonly previousButtonDisabled = computed(
-    () => !this.#hasPreviousPage() || this.#isFetchingNextPage(),
+    () => !this.query.hasPreviousPage() || this.query.isFetchingNextPage(),
   )
   readonly previousButtonText = computed(() =>
-    this.#isFetchingPreviousPage()
+    this.query.isFetchingPreviousPage()
       ? 'Loading more...'
-      : this.#hasPreviousPage()
+      : this.query.hasPreviousPage()
         ? 'Load Older'
         : 'Nothing more to load',
   )
-
-  readonly #hasPreviousPage = this.query.hasPreviousPage
-  readonly #hasNextPage = this.query.hasNextPage
-  readonly #isFetchingPreviousPage = this.query.isFetchingPreviousPage
-  readonly #isFetchingNextPage = this.query.isFetchingNextPage
 }

examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts

@@ -36,7 +36,7 @@ import { TasksService } from '../services/tasks.service'
         <input type="text" [(ngModel)]="newItem" placeholder="Enter text" />
         <button (click)="addItem()">Create</button>
         <ul>
-          @for (task of tasks.data(); track task) {
+          @for (task of tasks.data(); track $index) {
             <li>{{ task }}</li>
           }
         </ul>

packages/angular-query-experimental/src/__tests__/inject-query.test.ts

@@ -556,12 +556,20 @@ describe('injectQuery', () => {
 
     test('should throw when throwOnError is true', async () => {
       const zone = TestBed.inject(NgZone)
-      const errorPromise = new Promise<Error>((resolve) => {
+      const zoneErrorPromise = new Promise<Error>((resolve) => {
         const sub = zone.onError.subscribe((error) => {
           sub.unsubscribe()
           resolve(error as Error)
         })
       })
+      let handler: ((error: Error) => void) | null = null
+      const processErrorPromise = new Promise<Error>((resolve) => {
+        handler = (error: Error) => {
+          process.off('uncaughtException', handler!)
+          resolve(error)
+        }
+        process.on('uncaughtException', handler)
+      })
 
       @Component({
         selector: 'app-test',
@@ -580,18 +588,33 @@ describe('injectQuery', () => {
 
       TestBed.createComponent(TestComponent).detectChanges()
 
-      await vi.runAllTimersAsync()
-      await expect(errorPromise).resolves.toEqual(Error('Some error'))
+      try {
+        await vi.runAllTimersAsync()
+        await expect(zoneErrorPromise).resolves.toEqual(Error('Some error'))
+        await expect(processErrorPromise).resolves.toEqual(Error('Some error'))
+      } finally {
+        if (handler) {
+          process.off('uncaughtException', handler)
+        }
+      }
     })
 
     test('should throw when throwOnError function returns true', async () => {
       const zone = TestBed.inject(NgZone)
-      const errorPromise = new Promise<Error>((resolve) => {
+      const zoneErrorPromise = new Promise<Error>((resolve) => {
         const sub = zone.onError.subscribe((error) => {
           sub.unsubscribe()
           resolve(error as Error)
         })
       })
+      let handler: ((error: Error) => void) | null = null
+      const processErrorPromise = new Promise<Error>((resolve) => {
+        handler = (error: Error) => {
+          process.off('uncaughtException', handler!)
+          resolve(error)
+        }
+        process.on('uncaughtException', handler)
+      })
 
       @Component({
         selector: 'app-test',
@@ -610,8 +633,15 @@ describe('injectQuery', () => {
 
       TestBed.createComponent(TestComponent).detectChanges()
 
-      await vi.runAllTimersAsync()
-      await expect(errorPromise).resolves.toEqual(Error('Some error'))
+      try {
+        await vi.runAllTimersAsync()
+        await expect(zoneErrorPromise).resolves.toEqual(Error('Some error'))
+        await expect(processErrorPromise).resolves.toEqual(Error('Some error'))
+      } finally {
+        if (handler) {
+          process.off('uncaughtException', handler)
+        }
+      }
     })
   })
 

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

@@ -99,7 +99,7 @@ export function createBaseQuery<
     >['notifyOnChangeProps'],
   ) => {
     if (!observer) {
-      throw new Error('Observer is not initialized')
+      throw new Error(OBSERVER_NOT_READY_ERROR)
     }
 
     const trackedResult = observer.trackResult(result)
@@ -125,7 +125,7 @@ export function createBaseQuery<
     }
   }
 
-  const createOrUpdateObserver = (
+  const setObserverOptions = (
     options: DefaultedQueryObserverOptions<
       TQueryFnData,
       TError,
@@ -134,14 +134,23 @@ export function createBaseQuery<
       TQueryKey
     >,
   ) => {
-    if (observer) {
+    if (!observer) {
+      observer = new Observer(queryClient, options)
+      destroyRef.onDestroy(() => {
+        destroyed = true
+        stopPendingTask()
+      })
+    } else {
       observer.setOptions(options)
-      return
     }
+  }
 
-    observer = new Observer(queryClient, options)
+  const subscribeToObserver = () => {
+    if (!observer) {
+      throw new Error(OBSERVER_NOT_READY_ERROR)
+    }
 
-    const unsubscribe = observer.subscribe((state) => {
+    return observer.subscribe((state) => {
       if (state.fetchStatus !== 'idle') {
         startPendingTask()
       } else {
@@ -172,35 +181,37 @@ export function createBaseQuery<
         })
       })
     })
-    destroyRef.onDestroy(() => {
-      destroyed = true
-      unsubscribe()
-      stopPendingTask()
-    })
   }
 
   const resultSignal = linkedSignal({
     source: defaultedOptionsSignal,
     computation: () => {
-      if (!observer)
-        throw new Error(
-          'injectQuery: QueryObserver not initialized yet. Avoid reading the query result during construction',
-        )
+      if (!observer) throw new Error(OBSERVER_NOT_READY_ERROR)
       const defaultedOptions = defaultedOptionsSignal()
       const result = observer.getOptimisticResult(defaultedOptions)
       return trackObserverResult(result, defaultedOptions.notifyOnChangeProps)
     },
   })
 
-  // Effect to initialize the observer and set options when options change
   effect(() => {
     const defaultedOptions = defaultedOptionsSignal()
-    if (isRestoring()) return
-
     untracked(() => {
-      createOrUpdateObserver(defaultedOptions)
+      setObserverOptions(defaultedOptions)
+    })
+  })
+
+  effect((onCleanup) => {
+    if (isRestoring()) {
+      return
+    }
+    const unsubscribe = untracked(() => subscribeToObserver())
+    onCleanup(() => {
+      unsubscribe()
+      stopPendingTask()
     })
   })
 
   return signalProxy(resultSignal.asReadonly())
 }
+const OBSERVER_NOT_READY_ERROR =
+  'injectQuery: QueryObserver not initialized yet. Avoid reading the query result during construction'