在对对象进行操作时链接递归 RxJS 可观察对象

Question

我的后端有两个 graphql 查询：familiyTreeQuery 它返回一个家谱作为带有孩子的节点，它也可以有孩子等等，personPicturesQuery($name: string) 返回给定人的图片。

我的目标是调用familyTreeQuery，迭代树，如果这个人叫Alice，那么我想为这个人调用personPicturesQuery，并将信息添加到树中的节点。应该对树中的所有 Alice 都这样做。

我的问题是，获取图片的调用是异步发生的，因此在将信息添加到节点之前返回数据。 我未能按照this question 中的建议使用flatMap，因为获取图片的调用是在迭代树时发生的，我无法在familyTreeQuery 的管道方法中调用它。

public getContext(): Observable<TreeNode> {
  return this.familyTreeQuery.watch().valueChanges.pipe(
    map(result => {
      const familyTree = result.data.familyTree;;
      this.addPicturesToAlice(familyTree);
      return familyTree;
      
    })
  )
}

private addPicturesToAlice(node: TreeNode) {
  if (node.name === 'Alice') {
    this.fetchPictures(node.id).subscribe(pictures => {
      node.pictures = pictures;
    })
  }
  if (node.children && node.children.length > 0) {
    for (const childNode of node.children) {
      this.addPicturesToAlice(childNode);
    }
  }
}

private this.fetchPictures(personId): Observable<Picture[]> {
  return this.personPicturesQuery.fetch({id: personId}).pipe(
    map(result => {
      return result.data.personPictures;
    })
  )
}

据我了解，我不应该在 addPicturesToAlice 方法中调用 subscribe，但我是 Angular 和 RxJS 的新手，并没有找到一种方法来完成这项工作。

Answer 1

您可以通过创建一个 observables 数组并递归地传递它，然后使用 forkJoin 在 getContext 中订阅它来实现这一点，如下所示：

public getContext(): Observable<TreeNode> {
  return this.familyTreeQuery.watch().valueChanges.pipe(
    switchMap(({ data: { familyTree } }) => forkJoin(this.addPicturesToAlice(familyTree)))
  )
}

private addPicturesToAlice(node: TreeNode, observables: Observable<Picture[]>[] = []): Observable<Picture[]>[] {
  if (node.name === 'Alice') observables.push(
    this.fetchPictures(node.id).pipe(tap(pictures => node.pictures = pictures))
  )

  if (node.children?.length) {
    for (const childNode of node.children) {
      this.addPicturesToAlice(childNode, observables);
    }
  }

  return observables;
}

private fetchPictures(personId: number): Observable<Picture[]> {
  return this.personPicturesQuery
    .fetch({ id: personId })
    .pipe(map(result => result.data.personPictures))
}

希望它足够清楚。