feat: remove the need to explictly unsubscribe

Author: NetanelBasal

packages/ng-query/src/lib/base-query.ts

@@ -6,14 +6,7 @@ import {
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core';
-import {
-  Observable,
-  shareReplay,
-  Subject,
-  Subscription,
-  takeUntil,
-  Unsubscribable,
-} from 'rxjs';
+import { Observable, shareReplay, Subscription } from 'rxjs';
 
 export function baseQuery<
   TQueryFnData = unknown,
@@ -51,13 +44,6 @@ export function baseQuery<
 
   console.log('NEW OBSERVER INSTANCE');
 
-  const destroy = new Subject();
-
-  (queryObserver as unknown as Unsubscribable).unsubscribe = () => {
-    destroy.next(true);
-    destroy.complete();
-  };
-
   (
     queryObserver as unknown as {
       updateQueryKey: (queryKey: QueryKey) => void;
@@ -75,12 +61,18 @@ export function baseQuery<
 
   (queryObserver as unknown as { result$: Observable<unknown> }).result$ =
     new Observable<QueryObserverResult<TData, TError>>((observer) => {
+      const mergedOptions = client.defaultQueryOptions({
+        ...options,
+        // The query key can be changed, so we need to rebuild it each time
+        ...queryObserver.options,
+      });
+
       console.log(
         'NEW OBSERVER SUBSCRIPTION',
         queryObserver.getCurrentQuery().queryKey
       );
 
-      observer.next(queryObserver.getOptimisticResult(defaultedOptions));
+      observer.next(queryObserver.getOptimisticResult(mergedOptions));
 
       const queryObserverDispose = queryObserver.subscribe((result) => {
         observer.next(
@@ -99,10 +91,9 @@ export function baseQuery<
         queryObserverDispose();
       };
     }).pipe(
-      takeUntil(destroy.asObservable()),
       shareReplay({
         bufferSize: 1,
-        refCount: !defaultedOptions.keepPreviousData,
+        refCount: true,
       })
     );
 

packages/playground/src/app/pagination-page/pagination-page.component.ts

@@ -1,10 +1,5 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnDestroy,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { SubscribeModule } from '@ngneat/subscribe';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { SpinnerComponent } from '../spinner/spinner.component';
@@ -44,15 +39,20 @@ import { PaginationService } from './pagination.service';
           Previous Page
         </button>
 
-        <button (click)="nextPage()">Next Page</button>
+        <button
+          (click)="nextPage()"
+          [disabled]="projects.isPreviousData || !projects.data?.hasMore"
+        >
+          Next Page
+        </button>
         {{ projects.isFetching ? 'Loading...' : '' }}
       </div>
     </ng-container>
   `,
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PaginationPageComponent implements OnDestroy {
+export class PaginationPageComponent {
   private page = new BehaviorSubject(0);
   page$ = this.page.asObservable();
   projectsService = inject(PaginationService);
@@ -75,10 +75,6 @@ export class PaginationPageComponent implements OnDestroy {
     this.page.next(this.page.getValue() - 1);
   }
 
-  ngOnDestroy() {
-    this.projectsService.destroy();
-  }
-
   trackBy(_: number, project: { id: number }) {
     return project.id;
   }

packages/playground/src/app/pagination-page/pagination.service.ts

@@ -27,16 +27,12 @@ export class PaginationService {
     );
   }
 
-  destroy() {
-    this.projectsObserver?.unsubscribe();
-    this.projectsObserver = null;
-  }
-
   private fetchProjects(page = 0) {
     return this.useQuery(
       ['projects', page] as const,
       ({ queryKey }) => fetchProjects(queryKey[1]),
       {
+        staleTime: 5000,
         keepPreviousData: true,
       }
     );