CODEWITHSUNDEEP
angularfirebaseangularfire2
Rodrigo Assis Neves
Rodrigo Assis Neves

Reputation: 150

Angular calling cloud function multiple times

I'm having problems with a cloud function being called multiple times in my angular project. So console.log('call') is being executed three times.

this.profileList$ = this.usersService.profileList(this.route.snapshot.paramMap.get('groupId')!).pipe(
      tap(() => console.log('call')),
      catchError(() => {
        this.toastrService.danger('You do not have permission to view this group', 'Error');
        return of([]);
      }),
    );

I tried to use take(1)but made no difference, it seems that it has something to do with when I handle my profileList$, because if I delete my fieldsToSearch$ I'll have one call less, and if I delete my async pipe in .html I'll have another one less. But of course, if I delete fieldsToSearch$ and the async pipe it'll break.

this.fieldsToSearch$ = this.profileList$.pipe(
      map((profiles) =>
        profiles.map((profile: any) => {
          const formattedProfile = { ...profile };
          formattedProfile.values = [ formattedProfile.displayName ];
          // Append sortedField values to values array
          for (const field of formattedProfile.sortedFields) {

 KEEPS GOING JUST FORMATTING DATA

Thanks for your attention.

Upvotes: 1

Views: 56

Answers (1)

eko
eko

Reputation: 40647

How about caching the response and providing it to the late subscribers from that cache:

import { publishReplay, refCount } from 'rxjs/operators';

this.profileList$ = this.usersService.profileList(this.route.snapshot.paramMap.get('groupId')!).pipe(
      tap(() => console.log('call')),
      catchError(() => {
        this.toastrService.danger('You do not have permission to view this group', 'Error');
        return of([]);
      }),
      publishReplay(1),
      refCount(),
    );

Upvotes: 1

Related Questions