RxJS: chain of calls with polling in the last switchMap

Question

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),
    ),
  ),

score 3 · Accepted Answer · answered Aug 09 '22 at 21:10

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()
  )
);

RxJS: chain of calls with polling in the last switchMap

1 Answers1