Issue with subscribing to nested observables, unable to successfully unsubscribe

Question

Issue with subscribing to nested observables, unable to successfully unsubscribe

My app is using Firebase auth with Firestore (https://github.com/angular/angularfire2). Despite my efforts to unsubscribe from all observables fetched from Firestore before signing out, I keep encountering a "FirebaseError: Missing or insufficient permissions" issue. This error seems to stem from a nested subscription within another subscription in the code snippet below.

Even after unsubscribing from both subscriptions in the ngOnDestroy method, the error persists.

this.proposalSubscription = this._posts.retrieveProposals(user.uid)
  .subscribe(proposals => {
      this.proposals = proposals;
      this.proposals.forEach(proposal => {
        this.chatSubscription = this._chat.retrieveChat(proposal.id).subscribe(chat => {
          if (chat) {
            this.chats.set(proposal.id, chat)
          }
        });
      })
    });

I suspect that the problem lies in this line of code:

this.chatSubscription = this._chat.retrieveChat(proposal.id).subscribe(chat => ...

Even though I ensure to unsubscribe from both proposalSubscription and chatSubscription before signing out, the error persists. Can anyone suggest a solution to this issue? Additionally, I have limited experience with rxjs and its operators. Is there an operator that can help avoid such nested subscriptions?

Any insights would be greatly appreciated. Thank you.

angular typescript firebase rxjs google-cloud-firestore

Answer 1

Answer №1

To establish your subscription, follow these steps:

this.subscriptionModel = this._posts.requestSubscriptions(user.uid)
                                    .pipe(
                                      switchMap(subscriptions => {

                                        // Save subscriptions in a class variable like this
                                        this.subscriptions = subscriptions;

                                        const obs$ = subscriptions.map(s => {
                                          return this._chat.getChat(s.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.conversations.set(s.id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      })
                                    )
                                    .subscribe();

You have the flexibility to arrange your operator chain as desired and maintain only one subscription.

In ngOnDestory, remember to unsubscribe from the subscription:

ngOnDestroy() {

 if(this.subscriptionModel) {
   this.subscriptionModel.unsubscribe()
 }
}

If you anticipate evaluating the

this._posts.requestSubscriptions(user.uid)

observable only once, you can eliminate the explicit unsubscribe in ngOnDestroy by using take(1) like this:

this._posts.requestSubscriptions(user.uid)
                                    .pipe(
                                      take(1),
                                      switchMap(subscriptions => {

                                        // Save subscriptions in a class variable like this
                                        this.subscriptions = subscriptions;

                                        const obs$ = subscriptions.map(s => {
                                          return this._chat.getChat(s.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.conversations.set(s.id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      }),                                          
                                    )
                                    .subscribe();

Answer 2

To establish your subscription, follow these steps:

this.subscriptionModel = this._posts.requestSubscriptions(user.uid)
                                    .pipe(
                                      switchMap(subscriptions => {

                                        // Save subscriptions in a class variable like this
                                        this.subscriptions = subscriptions;

                                        const obs$ = subscriptions.map(s => {
                                          return this._chat.getChat(s.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.conversations.set(s.id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      })
                                    )
                                    .subscribe();

You have the flexibility to arrange your operator chain as desired and maintain only one subscription.

In ngOnDestory, remember to unsubscribe from the subscription:

ngOnDestroy() {

 if(this.subscriptionModel) {
   this.subscriptionModel.unsubscribe()
 }
}

If you anticipate evaluating the

this._posts.requestSubscriptions(user.uid)

observable only once, you can eliminate the explicit unsubscribe in ngOnDestroy by using take(1) like this:

this._posts.requestSubscriptions(user.uid)
                                    .pipe(
                                      take(1),
                                      switchMap(subscriptions => {

                                        // Save subscriptions in a class variable like this
                                        this.subscriptions = subscriptions;

                                        const obs$ = subscriptions.map(s => {
                                          return this._chat.getChat(s.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.conversations.set(s.id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      }),                                          
                                    )
                                    .subscribe();

Answer 3

Answer №2

When it comes to managing dependent observables, using switchMap instead of nested subscriptions is a more efficient approach. To handle multiple subscriptions within the same component, employing takeUntil allows you to emit a single value into a subject and cancel all subscriptions simultaneously. By mapping proposals to an array of observables and utilizing combineLatest, you can obtain an array containing the results of those observables.

finalise = new Subject();

this._posts.retrieveProposals(user.uid)
  .pipe(
    switchMap(proposals => combineLatest(proposals.map(proposal => this._chat.retrieveChat(proposal.id)))),
    takeUntil(finalise)
  ).subscribe(chats => {
    const chat = proposals.find(p => p);
    this.chats.set(proposal.id, chat)
  });

In the ngOnDestroy method:

this.finalise.next();

This will effectively terminate all subscriptions linked to finalise in the takeUntil operator.

Answer 4

When it comes to managing dependent observables, using switchMap instead of nested subscriptions is a more efficient approach. To handle multiple subscriptions within the same component, employing takeUntil allows you to emit a single value into a subject and cancel all subscriptions simultaneously. By mapping proposals to an array of observables and utilizing combineLatest, you can obtain an array containing the results of those observables.

finalise = new Subject();

this._posts.retrieveProposals(user.uid)
  .pipe(
    switchMap(proposals => combineLatest(proposals.map(proposal => this._chat.retrieveChat(proposal.id)))),
    takeUntil(finalise)
  ).subscribe(chats => {
    const chat = proposals.find(p => p);
    this.chats.set(proposal.id, chat)
  });

In the ngOnDestroy method:

this.finalise.next();

This will effectively terminate all subscriptions linked to finalise in the takeUntil operator.

Issue with subscribing to nested observables, unable to successfully unsubscribe

Answer №1

Answer №2

Similar questions

Error encountered while implementing onMutate function in React Query for Optimistic Updates

Typescript validation of tokens using Azure functions

What circumstances warrant the utilization of an Angular service?

Recording the details of an Angular project through the utilization of Compodoc

How can ng-content be used to adjust the displayed content in Angular?

Utilize Ngrx to keep an eye on specific items within the store

Accommodate the Angular form with a null value

Ways to limit file access and downloads on an IIS server

What is preventing TypeScript from automatically inferring the type of an argument in a generic function that utilizes `keyof`?

Creating a sidebar in Jupyter Lab for enhanced development features

Broaden the natural interface for the element

Issue with Adding Class to Angular2 Material Tooltips

What is the best way to modify the underline style of a tab in Material UI?

Approach to Monitoring Notifications

What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

API rest data retrieval service in Angular

Eliminate the loading screen in Ionic 2

Disable the default animation

URL for image preview on Amazon S3

The type 'TaskListProps[]' cannot be assigned to type 'TaskListProps'