How do you unsubscribe to apollo observable in angular?

Question

I'm building an angular (4.x) application using apollo-angular, and I'm wondering how to unsubscribe from apollo observables (if you need to at all).

I'm trying to follow the guidance in this response by creating a query:

this.query = this.apollo.watchQuery<LatestReportQueryResponse>({
  fetchPolicy: 'network-only',
  query: myQuery
});

Assigning a new subject:

  private ngUnsubscribe: Subject<void> = new Subject<void>();

Subscribing to the query:

this.query.takeUntil(this.ngUnsubscribe).subscribe(({ data }) => {...}

and then destroying all active observables on a onDestroy event cycle with something like:

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

After adding the .takeUntil(this.ngUnsubscribe), I run into lint errors like:

Argument of type 'Subject' is not assignable to parameter of type 'Observable'.

Or when I try to manually unsubscribe to the ApolloQueryObservable, I get:

Property 'unsubscribe' does not exist on type 'ApolloQueryObservable'. Did you mean 'subscribe'?

Is unsubscribing necessary for apollo observables?

Answer 1

The return value of this.query.takeUntil(this.ngUnsubscribe).subscribe(...) should give you the unsubscribe function.

subscribe and save unsubscribe function:

this.unsubscribe = this.query.takeUntil(this.ngUnsubscribe).subscribe(...)

on the onDestroy event cycle, call the function:

this.unsubscribe()

Answer 2

There is a clean way that we use often that enable you to dispose of the second observable ngUnsubscribe.

It consists of 1- storing your subscription in a property of type : Subscription, 2 - on destroy you have to call the function subscribe of this propoerty.

you can use array if you have more than one subscription

import { from, Subscription } from 'rxjs';

private subscriptions: Subscription[] = [];
ngOnInit() {
this.subscriptions.push( this.settingService.diarySettings.subscribe(settings => {

 }));
}
ngOnDestroy(): void {
  this.subscriptions.forEach(sub => sub.unsubscribe());
 }

Answer 3

Although the question is answering this is a more specific scenario that explains more to this question, so adding this below blog link here. https://www.digitalocean.com/community/tutorials/angular-takeuntil-rxjs-unsubscribe

Answer 4

import { from, Subscription } from 'rxjs';

export class CalendarWeekViewStdComponent implements OnInit, OnDestroy, AfterViewInit {
private subscriptionName: Subscription;

ngOnInit() {
this.subscriptionName = this.settingService.diarySettings.subscribe(settings => {

 });
}
  ngOnDestroy(): void {
if (this.subscriptionName) {
      this.subscriptionName.unsubscribe();
    }
}
}