mergeMap()

Esse operador do rxjs manipula e combina uma stream de dados do Observable com outra stram de dados.

Exemplo

O Exemplo abaixo manipula o Observable do tipo TaskBoardStage e incorpora na propriedade tasks, as tarefas que pertencem aquele board.

import { Observable, mergeMap, map } from 'rxjs';

interface User {
  id: number;
  name: string;
}

interface Task {
  title: string;
  description: string;
  user?: Pick<User, 'id'>;
  boardId?: number;
  boardStageId?: number;
}

interface TaskBoardStage {
  boardId: number;
  name: string;
  id?: number;
  description?: string;
  tasks?: Task[];
}

const tasksObservable: Observable<Task[]> = new Observable<Task[]>(
  (subscribe) => {
    const tasks: Task[] = [
      {
        title: 'Task 1',
        description: 'Description task 1',
        boardId: 1,
        boardStageId: 1,
      },
      {
        title: 'Task 2',
        description: 'Description task 2',
        boardId: 1,
        boardStageId: 2,
      },
      {
        title: 'Task 3',
        description: 'Description task 3',
        user: {
          id: 1,
        },
        boardId: 1,
        boardStageId: 1,
      },
    ];

    subscribe.next(tasks);
    subscribe.complete();
  },
);

const taskBoardStageObservable: Observable<TaskBoardStage> =
  new Observable<TaskBoardStage>((subscribe) => {
    const taskBoardStage: TaskBoardStage = {
      id: 1,
      boardId: 1,
      name: 'Stage 1',
    };

    subscribe.next(taskBoardStage);
    subscribe.complete();
  });

export const mergeTasksOnTaskBoard: Observable<TaskBoardStage> =
  taskBoardStageObservable.pipe(
    mergeMap((taskBoardStage: TaskBoardStage) => {
      return tasksObservable.pipe(
        map((tasks: Task[]) => {
          const tasksFromBoardStage = tasks.filter(
            (task: Task) => task.boardStageId === taskBoardStage.id,
          );

          if (tasksFromBoardStage.length) {
            return {
              ...taskBoardStage,
              tasks: tasksFromBoardStage,
            };
          }

          return taskBoardStage;
        }),
      );
    }),
  );

function executeMergeTasksOnTaskBoard() {
  mergeTasksOnTaskBoard.subscribe((taskBoardStage) => {
    console.log('rxjs - mergeMap:', taskBoardStage);
    /*
      {
        id: 1,
        boardId: 1,
        name: "Stage 1",
        tasks: [{
          title: "Task 1",
          description: "Description task 1",
          boardId: 1,
          boardStageId: 1
        }, {
          title: "Task 3",
          description: "Description task 3",
          user: {
            id: 1
          },
          boardId: 1,
          boardStageId: 1
        }]
      } 
    */
  });
}

Para visualizar a implementação desse fluxo acessar:

codesandbox

Exemplo com nest-js

git - Camada de aplicação

Docs

rxjs

learn rxjs