javascriptasynchronousrxjsswitchmap

RxJS: chain of calls with polling in the last switchMap


I have a very complicated example of chained RxJS calls with a lot of switchMap and etc. Everything is clear for me until I faced one requirement: I need to poll last request every 5 sec until response object contains a value. I stuck a bit... I know how to make it if I have only polling or if I have only plain switchMap.

this.articleService.create(data).pipe(
  switchMap((article: ArticleCreateModel) => this.articleService.getArticle(article.id)),
  switchMap((article: ArticleCreateModel) =>
    this.articleService.update({
      ...article,
      timestamp: this.someFakeService.getData(),
    }),
  ),
  // somehow I need to poll next createAsyncCommentsSection every 5 sec until response object key is let's say 'true'
  switchMap((article: ArticleCreateModel) => this.articleService.createAsyncCommentsSection(article.id)),
);

How can I poll last switchMap every 5 sec until response object key is let's say 'true'. And retry it only 5 times?

I tried so, but it looks like it doesn't work:

  switchMap((article: ArticleCreateModel) =>
    this.articleService.createAsyncCommentsSection(article.id).pipe(
      delay(5000),
      filter((article: ArticleCreateModel) => !!article.hasSyncedWithOtherAPI),
      take(5),
    ),
  ),

Solution

  • You can create a single observable that polls and emits when response.isComplete like this:

    timer(0, 5000).pipe(
        take(5),
        switchMap(() => this.articleService.createAsyncCommentsSection(articleId)),
        filter(response => response.isComplete),
        first()
    );
    

    timer() will emit immediately, then every 5 seconds; a maximum of 5 times thanks to take(5).

    filter prevents emissions until your condition is met.

    first will take only 1 emission, but will throw an error if no emission is received before the stream is completed.

    So altogether, could look like this:

    this.articleService.create(data).pipe(
      switchMap((article: ArticleCreateModel) => this.articleService.getArticle(article.id)),
      switchMap((article: ArticleCreateModel) =>
        this.articleService.update({
          ...article,
          timestamp: this.someFakeService.getData(),
        }),
      ),
      switchMap((article: ArticleCreateModel) => timer(0, 5000).pipe(
        take(5),
        switchMap(() => this.articleService.createAsyncCommentsSection(article.id)),
        filter(response => response.isComplete),
        first()
      )
    );