How do I return two http requests sequentially in rxjs and use data from first in second call?

Question

I've written a http function that works using switch map to get the value from one http request and use it as a parameter in the second, but how do I return not only the final http request but also the data from the first?

Here is my function:

      .post<RxObservable<unknown>>(
        `${this.nextApiEndpoint}ProgramReview/GetAssessmentQuestionNumber`,
        body,
        {}
      )
      .pipe(
        switchMap((data) => {
          return this.http.post<any>(
            `${this.nextApiEndpoint}ProgramReview/GetProgramReviewQuestion`,
            { studentId: args.studentId, questionId: data, programReviewId: args.programReviewId },
            {}
          );
        }),
        catchError((err) => {
          return err;
        })
      );
  }

I subscribe to is in the component and get the return data from the final http request, but I also want to pass the data from the first request to the subscribe in the component.

Andrei · Accepted Answer · 2025-04-23 20:28:50Z

3

it could be a bit ugly, but you will have to remap the event from the second call

      .post<DataType>(
        `${this.nextApiEndpoint}ProgramReview/GetAssessmentQuestionNumber`,
        body,
        {}
      )
      .pipe(
        switchMap((data) => {
          return this.http.post<any>(
            `${this.nextApiEndpoint}ProgramReview/GetProgramReviewQuestion`,
            { studentId: args.studentId, questionId: data, programReviewId: args.programReviewId },
            {}
          ).pipe(map(secondCallResult => [data, secondCallResult])); //added this line
        }),
        catchError((err) => {
          return err;
        })
      );
  }

answered 2 days ago

Andrei

12.4k1 gold badge16 silver badges24 bronze badges

This is the correct answer. You want to compose the result of the call you've switched to with the reference to the data that you have in scope. map() is the way to change the shape of the call you've made to include that data. Note that you don't have to return an array from map(); you could also return an object whose keys are the data and the result of the second call.
– D M
Commented 2 days ago
More generally, though, if you need to return both the input and the result of the switchMap(), what you actually want is to have two different subscriptions (where the second is composed from the first). There's additional overhead to make sure you don't double subscribe, but you can access both values without having to map and unpack an intermediate array/object.
– D M
Commented 2 days ago
Thank you, this really helped. I kept changing from switchMap to concatMap or exhaustMap, thinking one of them would do it for me.
– bradrice
Commented yesterday
@bradrice in this case there is literally zero difference between these operators. their behavior could be different if a source observable would emit many events, but here it is just one http response event
– Andrei
Commented yesterday

Add a comment |

Collectives™ on Stack Overflow

How do I return two http requests sequentially in rxjs and use data from first in second call?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related