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?

score 5 · Accepted Answer · answered Sep 06 '17 at 06:22

5

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()

answered Sep 06 '17 at 06:22

Locco0_0

3,420
5
30
42

Thanks for the response! I currently have the setup you described-- however, when I however over the "this.query" (before the takeunti()) typescript complains with: "The 'this' context of type 'ApolloQueryObservable' is not assignable to method's 'this' of type Observable>'. Is there any way to confirm that an observable is completed/destroyed? – Tkwon123 Sep 06 '17 at 13:13
Sorry, i'm not sure if it can be confirmed. Maybe it is written in the [API](http://dev.apollodata.com/angular2) – Locco0_0 Sep 06 '17 at 13:26
This is wrong. You don't need to unsubscribe if you have a takeUntil. Once the takeUntil meets its callback, it auto unsubs. You could just set `this.ngUnsubscribe = false;` in your answer, `this.unsubscribe()` would fail as it's not a function. – trudesign Mar 24 '21 at 00:56

score 1 · Answer 2 · answered Nov 22 '20 at 00:55

1

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

answered Nov 22 '20 at 00:55

Titus Vimal Raj

11
1

3

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Anton Menshov Nov 22 '20 at 01:31

score 0 · Answer 3 · answered Nov 22 '20 at 03:08

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();
    }
}
}

score 0 · Answer 4 · answered Nov 22 '20 at 14:46

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());
 }

This is the correct way to do it but one small change. `private subscriptions: Subscription = new Subscription();` instead of setting it to an array, and `this.subscriptions.add` instead of `.push`. then you don't have to forEach, you just say `this.subscriptions.unsubscribe();` and it will unsub to all. — trudesign, Mar 24 '21 at 00:51

How do you unsubscribe to apollo observable in angular?

4 Answers4