Обработка двух HTTP-запросов (Angular + RxJS)

Это мой первый угловой проект, и я до сих пор плохо знаком с Observables и RxJS. В моем проекте сначала я хочу получить все уведомления с помощью запроса на получение. После этого я хочу получить идентификатор последнего уведомления, чтобы я мог отправить почтовый запрос на сервер, чтобы пометить их все как прочитанные. Итак, код в сервисе выглядит так:

 getNotifications(limit: number, page: number): any {
    return this.http
      .get<INotifications>(
        `${API_URL}/notifications?direction=desc&limit=${limit}&order_by=created_at&page=${page}`
      )
      .pipe(
        switchMap((response) => {
          const id = response.data[0].id;
          return this.markNotificationsAsRead(id);
        })
      );
  }

markNotificationsAsRead(id: number) {
    return this.http.post(`${API_URL}/notifications/${id}/mark_all_as_read`, {
      id,
    });
  }

Я пытался использовать switchMap и mergeMap.

операторы, но я получаю

RangeError: недопустимая длина массива

Код в компоненте:

 fetchData() {
    this.notificationsService.getNotifications(this.limit, this.meta?.next_page || 1).subscribe(
      (response) => {
        this.notifications = [...this.notifications, ...response.data];
        this.meta = response.meta;
        this.isLoading = false;
        // const mostRecentNotification = response.data[0].id;
        // this.markNotificationsAsRead(mostRecentNotification);
      },
      (error) => {
        this.handleErrors(error);
      }
    );
  }

Кстати: я могу заставить его работать, удалив этот закомментированный раздел в функции fetchData и просто вернув запрос на получение без передачи другому оператору, но я хотел попробовать и сделать это в сервисе. Любые идеи, почему это не сработает?