Could I potentially pause and wait for a subscription in Angular?

Question

Could I potentially pause and wait for a subscription in Angular?

I'm looking to display a list of posts similar to this: Post List

In order to indicate which post is favorited by a user, I need to retrieve data from two different collections in my MongoDB database. The ngOnInit function in my post-list.component.ts file currently appears as follows:

ngOnInit() {
    this.isLoading = true;
    this.postsService.getPosts(this.postsPerPage, this.currentPage);
    this.favoritesService.getFavorites(this.postsPerPage, this.currentPage);
    this.userId = this.authService.getUserId();
    this.postsSub = this.postsService
      .getPostUpdateListener()
      .subscribe((postData: { posts: Post[]; postCount: number }) => {
        this.totalPosts = postData.postCount;
        this.posts = postData.posts;
        console.log("Posts fetched successfully!");
      });
    this.favoritesSub = this.favoritesService
      .getFavoriteUpdateListener()
      .subscribe(
        (favoriteData: { favorites: Favorite[]; postCount: number }) => {
          this.isLoading = false;
          this.favorites = favoriteData.favorites;
          this.fetchFavorites();
          console.log("Favorites fetched successfully!");
        }
      );
    this.userIsAuthenticated = this.authService.getIsAuth();
    this.authStatusSub = this.authService
      .getAuthStatusListener()
      .subscribe((isAuthenticated) => {
        this.userIsAuthenticated = isAuthenticated;
        this.userId = this.authService.getUserId();
      });
  }

My post list only displays correctly if the post data arrives first. Due to the asynchronous nature of subscriptions, I cannot control which data arrives first. I have attempted to use the completed function of subscribe, but it was never executed. Another approach was to separate the favorites part into its own function and run it after the posts are fetched. However, both approaches resulted in an endless loading loop.

Is there a way to await the arrival of the post data first?

angular typescript rxjs mean-stack

Answer 1

Answer №1

If you're looking to achieve your desired outcome, there are a few options available for you.

Approach 1:

One way is to utilize the RxJS operator known as switchMap. This operator gets executed immediately after the subscription emits and returns a new Observable. For more information on how to use switchMap, check out this link ;)

Using the example of getPostUpdateListener and getFavoriteUpdateListener, your code would resemble something like this:

...

this.postsSub = this.postsService
  .getPostUpdateListener()
  .pipe(
    switchMap((postData: { posts: Post[]; postCount: number }) => {
      this.totalPosts = postData.postCount;
      this.posts = postData.posts;
      console.log("Posts fetched successfully!");

      return this.favoritesService.getFavoriteUpdateListener();
    })
  )
  .subscribe((favoriteData: { favorites: Favorite[]; postCount: number }) => {
    this.isLoading = false;
    this.favorites = favoriteData.favorites;
    this.fetchFavorites();
    console.log("Favorites fetched successfully!");
  });

...

Approach 2:

An alternative option is to promisify your Observable using firstValueFrom or lastValueFrom, and then await its execution with async/await. You can find more details about this method here ;)

The implementation would look something like this:

async ngOnInit() {
  ...

  const postData: { posts: Post[]; postCount: number } = await firstValueFrom(this.postsService.getPostUpdateListener());
  
  this.totalPosts = postData.postCount;
  this.posts = postData.posts;
  console.log("Posts fetched successfully!");

  const favoriteData: { favorites: Favorite[]; postCount: number } = await firstValueFrom(this.favoritesService.getFavoriteUpdateListener());
  this.isLoading = false;
  this.favorites = favoriteData.favorites;
  this.fetchFavorites();
  console.log("Favorites fetched successfully!");

  ...
}

Given that Angular operates largely in a reactive manner, I would recommend going with approach 1 ;)

Answer 2

If you're looking to achieve your desired outcome, there are a few options available for you.

Approach 1:

One way is to utilize the RxJS operator known as switchMap. This operator gets executed immediately after the subscription emits and returns a new Observable. For more information on how to use switchMap, check out this link ;)

Using the example of getPostUpdateListener and getFavoriteUpdateListener, your code would resemble something like this:

...

this.postsSub = this.postsService
  .getPostUpdateListener()
  .pipe(
    switchMap((postData: { posts: Post[]; postCount: number }) => {
      this.totalPosts = postData.postCount;
      this.posts = postData.posts;
      console.log("Posts fetched successfully!");

      return this.favoritesService.getFavoriteUpdateListener();
    })
  )
  .subscribe((favoriteData: { favorites: Favorite[]; postCount: number }) => {
    this.isLoading = false;
    this.favorites = favoriteData.favorites;
    this.fetchFavorites();
    console.log("Favorites fetched successfully!");
  });

...

Approach 2:

An alternative option is to promisify your Observable using firstValueFrom or lastValueFrom, and then await its execution with async/await. You can find more details about this method here ;)

The implementation would look something like this:

async ngOnInit() {
  ...

  const postData: { posts: Post[]; postCount: number } = await firstValueFrom(this.postsService.getPostUpdateListener());
  
  this.totalPosts = postData.postCount;
  this.posts = postData.posts;
  console.log("Posts fetched successfully!");

  const favoriteData: { favorites: Favorite[]; postCount: number } = await firstValueFrom(this.favoritesService.getFavoriteUpdateListener());
  this.isLoading = false;
  this.favorites = favoriteData.favorites;
  this.fetchFavorites();
  console.log("Favorites fetched successfully!");

  ...
}

Given that Angular operates largely in a reactive manner, I would recommend going with approach 1 ;)

Answer 3

Answer №2

To ensure your code is clean and efficient, consider implementing the rxjs forkJoin operator. This operator is designed for the specific purpose of combining multiple observables into one. Essentially, if you have two observables that need to be subscribed to during component initialization, forkJoin can handle this process seamlessly.

Alternatively, you can avoid using subscribe by utilizing .toPromise() and awaiting the results. For more information on this approach, you can refer to this post.

Answer 4

To ensure your code is clean and efficient, consider implementing the rxjs forkJoin operator. This operator is designed for the specific purpose of combining multiple observables into one. Essentially, if you have two observables that need to be subscribed to during component initialization, forkJoin can handle this process seamlessly.

Alternatively, you can avoid using subscribe by utilizing .toPromise() and awaiting the results. For more information on this approach, you can refer to this post.

Answer 5

Answer №3

If you want to optimize your code, consider using combineLatest(RxJS v6) or combineLatestWith(RxJs v7.4). The combineLatest operator will trigger an emission every time any of the source Observables emit after they've emitted at least once. Since your services are independent of each other, using combineLatest would be more suitable in this scenario.

    this.postsSub = this.postsService.getPosts(this.postsPerPage, this.currentPage);
    this.favoritesSub  = this.favoritesService.getFavorites(this.postsPerPage, this.currentPage);

combineLatest([this.postsSub, this.favoritesSub]).pipe(
            map(([postData, favoriteData]) => {
               this.totalPosts = postData.postCount;
               this.posts = postData.posts;
               console.log("Posts fetched successfully!");
               this.isLoading = false;
               this.favorites = favoriteData.favorites;
               this.fetchFavorites();
               console.log("Favorites fetched successfully!");
            })).subscribe();

Answer 6

If you want to optimize your code, consider using combineLatest(RxJS v6) or combineLatestWith(RxJs v7.4). The combineLatest operator will trigger an emission every time any of the source Observables emit after they've emitted at least once. Since your services are independent of each other, using combineLatest would be more suitable in this scenario.

    this.postsSub = this.postsService.getPosts(this.postsPerPage, this.currentPage);
    this.favoritesSub  = this.favoritesService.getFavorites(this.postsPerPage, this.currentPage);

combineLatest([this.postsSub, this.favoritesSub]).pipe(
            map(([postData, favoriteData]) => {
               this.totalPosts = postData.postCount;
               this.posts = postData.posts;
               console.log("Posts fetched successfully!");
               this.isLoading = false;
               this.favorites = favoriteData.favorites;
               this.fetchFavorites();
               console.log("Favorites fetched successfully!");
            })).subscribe();

Could I potentially pause and wait for a subscription in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

The date in a nodejs application appears to be shifted by one day

Having trouble with sending a POST request using Rest Client, Express, and Node.js?

implement some level of control within the ngFor directive in Angular

The implementation of Symbol.species in the Node.js Buffer class to generate a RapidBuffer seems illogical and confusing

Retrieve the attribute from a TypeScript union data type

Understanding the Typescript Type for a JSON Schema Object

In Typescript, it is not possible to assign the type 'any' to a string, but I am attempting to assign a value that is

What is the process of 'initializing' an object in TypeScript?

Bringing Angular ECharts into a Stackblitz 15.1 setup: A How-To Guide

Is there a way to configure tsconfig so that it can properly recognize ".graphql" files and aliases when they are imported into components?

Explaining the union type using a list of data types

Having trouble compiling Angular CLI version 8.3.21 with the command ng serve

Eliminate nested object properties using an attribute in JavaScript

Struggling to compile Angular 8 when using ng2-adsense

How can you toggle the selection of a clicked element on and off?

Securing Angular 2+: Safeguarding Server-Side Lazy Loaded Modules

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

Having trouble getting tailwind dark mode to work on next.js?

Encountering an error when attempting to store a value in an array of custom types: "Unable to assign properties to undefined (setting 'id')"

Having trouble setting the default value of a select element with 'selected' in Angular's bootstrap?