RxJS forkJoin: Definition and Real World Uses

The complete article is published here: RxJS forkJoin: Definition and Real World Uses

RxJS is Reactive Extensions of JavaScript. It is a library to work with Observables which make developers life easier. RxJS provides various operators to work with in Angular. In this article we will discuss about RxJS Observable forkJoin operator, its definition, real world uses, error handling, is it deprecated etc.

What is RxJS forkJoin
forkJoin is a RxJS Observable Operator which works similar to Promise.all in JavaScript. It takes array of observables in input and emits value once all the observables are finished loading in parallel.

Is it deprecated ?
The big question about RxJS forkJoin operator is- is it deprecated ? The answer is- Kind of NO

I will explain what I mean!

Initially forkJoin was accepting object arguments as rest parameter. That is deprecated and no longer used.

Now they updated the operator and ask to provide array of observables instead of object arguments. As the line itself saying in above screenshot- @deprecated — Use the version that takes an array of Observables instead

• How RxJS forkJoin operator works

ForkJoin subscribes all the observables passed to that and runs them in parallel. It collects the last emitted values from all of the passed observables once they are done and gets you result in array.

import { Component, OnInit } from '@angular/core';
import { forkJoin, Observable, of } from 'rxjs';

@Component({
  selector: 'app-forkjoin',
  templateUrl: './forkjoin.component.html',
  styleUrls: ['./forkjoin.component.scss']
})
export class ForkjoinComponent implements OnInit {
  observables$: Observable<number[]> = of([1, 2, 3, 4, 5]);
  string$: Observable<string[]> = of(['Test', 'String']);
  constructor() { }

  ngOnInit(): void {
    forkJoin([this.observables$, this.string$]).subscribe(data => {
      console.log(data);
    });
  }
}

• Real World Uses

The big question which will come in your mind is- I know what you explained. Just let me know the Real World Examples of forkJoin operator..

So here are some great examples where RxJS forkJoin is best to use:

• Call multiple APIs in parallel

app.service.ts file

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable()
export class ForkJoinService {
    constructor(private httpClient: HttpClient) {
    }

    public getUserById(userId: number) {
        return this.httpClient.get('https://fakestoreapi.com/users/' + userId);
    }

    public getCartById(cartId: number) {
        return this.httpClient.get('https://fakestoreapi.com/carts/' + cartId);
    }

    public getProductById(productId: number) {
        return this.httpClient.get('https://fakestoreapi.com/products/' + productId);
    }
}

component.ts file

import { Component, OnInit } from '@angular/core';
import { forkJoin } from 'rxjs';
import { ForkJoinService } from './forkjoin.service';

@Component({
  selector: 'app-forkjoin',
  templateUrl: './forkjoin.component.html',
  styleUrls: ['./forkjoin.component.scss']
})
export class ForkjoinComponent implements OnInit {
  constructor(private forkJoinService: ForkJoinService) { }

  ngOnInit(): void {
    // simulate 3 requests
    forkJoin({
      userDetail: this.forkJoinService.getUserById(1),  // getting user for id 1
      productDetail: this.forkJoinService.getProductById(1), // getting product by id 1
      cartDetail: this.forkJoinService.getCartById(1) // getting cart by id 1
    })
      .subscribe(({ userDetail, productDetail, cartDetail }) => {
        console.log('userDetail', userDetail);
        console.log('productDetail', productDetail);
        console.log('cartDetail', cartDetail);
      });
  }
}

forkJoin comes as handy operator when situation like this happens. I have an example where I have to call 3 APIs simultaneously. I am using https://fakestoreapi.com to simulate the example.

Conclusion

This article covered definition, real world use cases, error handling of forkJoin operator. If you liked the article, share with others. What’s next? I would recommend you check this article: Real World Examples of 5 Common Observable Operators

Also Read: 5 Best Ways To Optimize Angular For Scaling (2021)

7 Best Ways To Improve Angular Code (2021)