RxJS - Executing observables in sequence - rxjs

Question

I'm trying to run several observables in sequence, while saving their values, but am having a hard time wrapping my head around the right way to do this.
An abstract outline of what I'm trying to do is to create a "FruitBasket", after first creating apples, and then creating pears, in order.
createApples: Observable<Apple[]> {
// creates apples...
}
createPears: Observable<Pear[]> {
// creates pears...
}
createFruitBasket(apples: Apple[], pears: Pear[]): Observable<FruitBasket>
{
// create a fruit basket
}
I would like the creation of apples to complete before attempting the creation of pears, and the creation of pears should complete before attempting the creation of the fruit basket.
Using async/await notation, the desired result would be:
makeABasket() {
let apples = await createApples();
let pears = await createPears();
let fruitBasket = await createFruit(apples, pears);
}
As a first attempt, I've come up with the following:
makeABasket() {
let apples: Apple[] = [];
let pears: Pear[] = [];
let basket: FruitBasket;
this.createApples().subscribe((newApples) => {
apples = apples.concat(newApples);
this.createPears().subscribe((newPears) => {
pears = pears.concat(newPears);
this.createFruitBasket(apples, pears).subscribe((newBasket) => {
basket = newBasket;
});
});
});
}
I know there is a better way to do this, using RxJS operators, but I can't seem to settle upon the right way. Note that I don't want to use forkJoin, as I want the creation functions to run sequentially, not in parallel.
Thanks in advance for any suggestions.

Answer 1

Your makeABasket code could look something like this
makeABasket() {
return this.createApples().pipe(
concatMap(apples => this.createPears().pipe(
map(pears => {
return {apples, pears};
})
),
concatMap(({apples, pears}) => this.createFruitBasket(apples, pears)).pipe(
map(pears => {
return {apples, pears, basket};
})
)
)
}
With such an implementation makeABasket would return an Observable<{apples: Apple[], pears: Pear[], basket: Basket}>.
Whoever needs to used apples, pears and basket can subscribe to this Observable like this
makeABasket().subscribe(
({apples, pears, basket}) => {
// do stuff with apples, pears and basket
}
)

Answer 2

to run things in parallel you need the concat combination function.
its doc: https://www.learnrxjs.io/learn-rxjs/operators/combination/concat
simply do
concat( // <- creates sequence.
this.createApples(), // <- first one.
this.createPears(), // <- once apple has been completed executes this one.
).pipe(
scan((result, item) => [...result, item], []), // <- accumulating tuple
skip(1), // <- apples aren't enough, skipping 1st emit.
concatMap(([apples, pears]) => this.createFruitBasket(apples, pears)), // <- now we can set the basket.
).subscribe();