rxjs演算子、ネストされたデータを単一のオブジェクトで返す方法は?

Nov 30 2020

ネストされたデータをrxjsの方法でフェッチするクリーンな方法を見つけることができません。

すべてのユーザーを返すオブザーバブルと、ユーザーIDを指定してすべての投稿を返すオブザーバブルがあります。

getUsers(): Observable<User[]>

そして

getPosts(id: string): Observable<[]>

投稿を含むユーザーのリストを返すにはどうすればよいですか?

現時点では、2つのネストされたサブスクリプションを使用してデータを準備しています。

nestedFetch() {
  this.service.getUsers()
  .subscribe(
    res => {
      res.forEach((user) => {
        this.service.getPosts(user.Id).subscribe(
          posts => {
            user.posts = posts;
            this.users.push(user);
          },
          err => console.log('something went wrong: ' + err)
        )
      })
    },
    err => console.log('something went wrong: ' + err)
  );
}

私はむしろこのような演算子を使用したいと思います。しかし、どうすれば投稿を含めてユーザーを返すことができますか?

nestedFetch() {
  this.service.getUsers().pipe(
    map(users => users.map(u => this.membership.getPosts(u.id))),
    mergeMap(posts => forkJoin(posts))
  ).subscribe(
    res => this.posts = posts, //returns only posts but not users
    err => console.log('something went wrong: ' + err)
  )
}

回答

2 MoxxiManagarm Nov 30 2020 at 19:19

内側のパイプは、ユーザーの投稿によってユーザーを拡張するのに役立ちます。

this.service.getUsers().pipe(
  switchMap(users => {
    const postsRequests$ = this.users.map(user => this.service.getPosts(user.id).pipe( // example for a error catch which would lead to an empty array not breaking the forkJoin // catchError(err => of([])), map(posts => ({ ...user, posts })), )); return forkJoin(postsRequests$);
  }),
).subscribe(/* ... */);