RxJs: multiple requests followed by one request via concatMap not working

Question

I make an api call which returns an array. I need to loop over this array and perform a new request per item. The following code works fine:

return this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap((response) => {
    return from(response.barcodes).pipe(
      concatMap((barcode) => {
        return this.expeditionService.saveTranssmartBarcode({
          ...saveBarcodeRequest,
          barcode: barcode,
        });
      })
    );
  })
);

However, when all items are finished, I want to make another request. Just one.

But when I use the following code, the process stops when the first item in the from array is finished.

return this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap((response) => {
    return from(response.barcodes).pipe(
      concatMap((barcode) => {
        return this.expeditionService.saveTranssmartBarcode({
          ...saveBarcodeRequest,
          barcode: barcode,
        });
      }),
      concatMap(() => {
        const transsmartSaveShipmentRequest: TranssmartSaveShipmentRequest =
          {
            reference: this.shipmentReferenceResult!.reference,
            price: this.transsmartDoBookingResponse!.price,
            trackingUrl: this.transsmartDoBookingResponse!.trackingUrl,
          };

        return this.expeditionService.saveTranssmartShipment(
          transsmartSaveShipmentRequest
        );
      })
    );
  })

I also had some slightly modified code where it was working, but then the final request was executed for each item in the array, where it only needs to execute once.

Does anybody know how to fix this? Thanks in advance!!

score 1 · Accepted Answer · answered Dec 06 '21 at 13:07

Piping a higher order operator like concatMap to a stream from from function would trigger it for each element of it's source array. You'd need to use an opeartor like last to restrict the stream only to the last element at a specific point of the stream.
Though it wouldn't make a difference piping last to either inner or outer observable, I'd prefer piping it to outer observable since it looks more elegant.

return this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap((response) => {
    return from(response.barcodes).pipe(
      concatMap((barcode) => {
        return this.expeditionService.saveTranssmartBarcode({
          ...saveBarcodeRequest,
          barcode: barcode,
        });
      })
    )
  }),
  last(),
  concatMap(() => {
    const transsmartSaveShipmentRequest: TranssmartSaveShipmentRequest = {
      reference: this.shipmentReferenceResult!.reference,
      price: this.transsmartDoBookingResponse!.price,
      trackingUrl: this.transsmartDoBookingResponse!.trackingUrl,
    };

    return this.expeditionService.saveTranssmartShipment(
      transsmartSaveShipmentRequest
    );
  })
);

Thanks! I think your answer fits my solution a little bit better. I posted my final solution below, which has some more concatenations — Robin, Dec 07 '21 at 09:28

Daniel Gimenez · Answer 2 · 2021-12-06T18:26:09.943

You can either use toArray to combine a bunch of separate emissions into a single array, or you can use concat to just process the two observables in serial since you really don't seem to want the results of saving barcodes.

I prefer the second, but both will do want you want and look cleaner than what you have.

ToArray Method

return this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap(res => from(res.barcodes)),
  concatMap(barcode => this.expeditionService.saveTranssmartBarcode({
    ...saveBarcodeRequest,
    barcode
  })),
  toArray(),
  concatMap(() => /* save TrannsmartShipmentRequest... */)
);

Concat Method

// you don't have to create variables as you can place the streams directly in concat.
const saveBarCodes$ = this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap(res => from(res.barcodes)),
  concatMap(barcode => this.expeditionService.saveTranssmartBarcode({
    ...saveBarcodeRequest,
    barcode
  }))
);
// no point in this being inside an operator.
const saveShipmentRequest: TranssmartSaveShipmentRequest = {
  reference: this.shipmentReferenceResult!.reference,
  price: this.transsmartDoBookingResponse!.price,
  trackingUrl: this.transsmartDoBookingResponse!.trackingUrl
};
const saveShipment$ = this.expeditionService.saveTranssmartShipment(saveShipmentRequest);
return concat(saveBarCodes$, saveShipment$);

It could be useful if you added toArray to the end of saveBarCode$ since that would cause the return result to be a tuple of an array of barcode save results and the result from saving the shipment.

Amazing, works like a charm! Adding the variables also makes the code a bit more clear I think. It does say that concat is deprecated though, so I used: return of(saveBarCodes$, saveShipment$, transsmartLabels$).pipe( concatAll() ); — Robin, Dec 07 '21 at 09:15
There are two versions of concat - an operator version and a generator version. If you got deprecated message then you imported the wrong one. The operator version got replaced with concatWith. — Daniel Gimenez, Dec 07 '21 at 15:09

score 0 · Answer 3 · answered Dec 07 '21 at 09:37

Here is my final solution based on Michael D's answer. The final concatMap should result in hitting the success method in the subscribe method for every item in the printViaIpAddress method. This works perfectly.

The answer of Daniel resulted finally in hitting the success method for every concatenated observable (I think), which was not exactly what I wanted in this case.

return this.expeditionService.getTranssmartBookingXml(request).pipe(
  concatMap((response) => {
    saveShipmentRequest.price = response.price;
    saveShipmentRequest.trackingUrl = response.trackingUrl;

    return from(response.barcodes).pipe(
      concatMap((barcode) => {
        return this.expeditionService.saveTranssmartBarcode({
          ...saveBarcodeRequest,
          barcode: barcode,
        });
      })
    );
  }),
  last(),
  concatMap(() => {
    return this.expeditionService.saveTranssmartShipment(
      saveShipmentRequest
    );
  }),
  concatMap(() => {
    return this.expeditionService.getTranssmartLabels(
      transsmartBonnenXmlRequest
    );
  }),
  concatMap((response) => {
    return from(response.values).pipe(
      concatMap((label) => {
        return this.expeditionService.printViaIpAddress({
          ...printTranssmartRequest,
          label,
        });
      })
    );
  })
);

RxJs: multiple requests followed by one request via concatMap not working

3 Answers3