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

Fixing the issue "Unable to access property 'toDataURL' of undefined" in the Angular2 signaturePad

Integrate a service component into another service component by utilizing module exports

Tips for accessing child elements within an Angular component

I am having trouble with the TypeScript compiler options not being detected in Visual Studio 2015

Creating a new line in the content of a MatDialog in Angular 7

React approach for managing multiple combobox values

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

Issue with ngbCollapse feature when attempting to collapse multiple dynamically generated divs on a single page

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

Error encountered in Typescript while attempting to $set a subdocument key value in MongoDB

Utilize Angular2 services to showcase a JSON object on the front end

Using browser.actions().mouseMove() in conjunction with sendKeys results in a syntax error

Tips for obtaining the iframe #document with cheeriojs?

Conceal the Header on the Login Module

Navigate directly to the dashboard page in Angular 5 using RxJS without needing to load the main page first

ABP's Angular DateTimePicker Component for Effortless Date and Time

What is the best way to delete an item from a React array state?

Angular universal issue: 404 error code failing to function properly

Leveraging pipes in Angular 2 within the (click) event handler

The Angular subscribe value is consistently assigned as -1, just before it receives the actual assigned value