Angular/RxJS: forkjoin with more than 6 parameters

Question

I use forkjoin to initialize data before loading my page. Unfortunately I have reached the limit of 6 parameters for forkjoin:

export class Sample implements OnInit {

  list1?: Pair[];
  list2?: Pair[];
  list3?: Pair[];
  list4?: Pair[];
  list5?: PairExt[];
  list6?: PairExt[];
  list7?: PairExt[];

  constructor(private http: HttpService,
              private httpWithCaching: HttpWithCachingService) {
  }

  ngOnInit(): void {
    this.initLists().subscribe(([list1, list2, list3, list4, list5, list6, list7]) => {
      this.list1 = list1;
      this.list2 = list2;
      this.list3 = list3;
      this.list4 = list4;
      this.list5 = list5;
      this.list6 = list6;
      this.list7 = list7;

      this.initModule();
    });
  }

  initLists(): Observable<[Pair[], Pair[], Pair[], Pair[], PairExt[], PairExt[], PairExt[]]> {
    return forkJoin([
      this.httpWithCaching.getList1(),
      this.httpWithCaching.getList2(),
      this.httpWithCaching.getList3(),
      this.httpWithCaching.getList4(),
      this.httpWithCaching.getList5(),
      this.httpWithCaching.getList6(),
      this.httpWithCaching.getList7()
    ]);
  }

  initModule(): void {
     //some requests and initialization after the lists were fetched...
  }

The code above will therefore no longer work as forkjoin is lmited to 6 parameters.

What would be the most simple solution for my case? All I want to do really is to fetch the lists before calling my initModule...

Thanks in advance!

What RxJS version are you using? In 7.3 it should work the way you use it right now. https://stackblitz.com/edit/rxjs-iguovh?devtoolsheight=60 — martin, Dec 03 '21 at 09:37
it works with 6.6.7 :) https://stackblitz.com/edit/rxjs-iguovh?devtoolsheight=60 — martin, Dec 03 '21 at 09:43
I would check this: https://stackoverflow.com/questions/49542770/work-around-for-more-than-6-forkjoin-parameters — Mrk Sef, Dec 03 '21 at 14:25

score 0 · Answer 1 · answered Dec 03 '21 at 07:54

0

Do it in other way:

  initLists(): Observable<[Pair[], Pair[], Pair[], Pair[], PairExt[], PairExt[], PairExt[]]> {
    return from([
      this.httpWithCaching.getList1(),
      this.httpWithCaching.getList2(),
      this.httpWithCaching.getList3(),
      this.httpWithCaching.getList4(),
      this.httpWithCaching.getList5(),
      this.httpWithCaching.getList6(),
      this.httpWithCaching.getList7()
    ]).pipe(combineLatestAll());
  }

That's it!

answered Dec 03 '21 at 07:54

Anton Marinenko

2,749
1
10
16

1

If you use old version of RxJS, then use `combineAll()` instead in pipe. – Anton Marinenko Dec 03 '21 at 07:57
Why minus, strange? – Anton Marinenko Dec 03 '21 at 11:25

score -1 · Answer 2 · answered Dec 03 '21 at 07:40

Perhaps fallback to traditional approach, i.e. Promises. Use Promise.all to make the parallel API calls (similar to forkJoin). Given that in forkJoin would return an Observable nested over API calls that would complete, we can easily replace it with Promise.all


initLists(): Promise<[Pair[], Pair[], Pair[], Pair[], PairExt[], PairExt[], PairExt[]]> {
   const promises = [this.httpWithCaching.getList1(),
      this.httpWithCaching.getList2(),
      this.httpWithCaching.getList3(),
      this.httpWithCaching.getList4(),
      this.httpWithCaching.getList5(),
      this.httpWithCaching.getList6(),
      this.httpWithCaching.getList7()];

   return Promise.all(promises);
}

score -1 · Accepted Answer · answered Dec 03 '21 at 07:49

-1

NB: Not Tested

Try below to group the forkJoins

   return forkJoin([
    forkJoin([
      this.httpWithCaching.getList1(),
      this.httpWithCaching.getList2(),
      this.httpWithCaching.getList3(),
      this.httpWithCaching.getList4(),
      this.httpWithCaching.getList5(),
      this.httpWithCaching.getList6(),
    ]),
    forkJoin([
       this.httpWithCaching.getList7(),
       this.httpWithCaching.getList8(),
    ])

 ]).pipe(
     map( x => x.flat())
  );

The mapping is useful to transform the data back to 1 dimensional array

answered Dec 03 '21 at 07:49

Owen Kelvin

14,054
10
41
74

This looks good! Could you advise on an alternative for 'flat' perhaps? I use es2018 only. – Dec 03 '21 at 08:00
2

Yes @TeaCup [].concat(...array) – Elia Dec 03 '21 at 08:30
didn't work for me unfortunately, but got it to work with arr.reduce((flat, toFlatten) => flat.concat(toFlatten), []) – Dec 03 '21 at 10:14
Looks overcomplicated. It can be done easier. – Anton Marinenko Dec 03 '21 at 11:26
You can spread the array in place of `flat`, something like `map( ([x1, x2]) => [...x1, ...x2])` – Owen Kelvin Dec 09 '21 at 09:40

Angular/RxJS: forkjoin with more than 6 parameters

3 Answers3