RxJs iif() operator is not subscribing to provided observable

Question

With the following code I'm intending to subscribe to function1, and then depending on the result (saleAgreed), subscribe to a second observable; either function2 or of(undefined). See below:

this.apiService.function1(id).pipe(
        switchMap(async (saleAgreed: boolean) => {

          // Wait for some input from the user
          let cancelAgreedSale = await this.promptSaleAgreedCancelDetails();

          // These are both evaluating to true   
          console.log(`sale agreed: ${saleAgreed}`)
          console.log(`cancelSaleAgreed: ${cancelAgreedSale}`)

          iif(
            function() {
              if (saleAgreed && cancelAgreedSale) { 
                this.removeSaleAgreedRequest = { 
                  contactId : this.cid, 
                  details : this.cancelSaleAgreedDetails
                };
              }
              return saleAgreed && cancelAgreedSale;
            }, this.apiService.function2(this.removeSaleAgreedRequest), of(undefined));

          // Thought returning the observable might help, but doesn't make a difference whether 
          // it's here or not
          return this.apiService.function2(this.removeSaleAgreedRequest)
        })
      ).subscribe(res => { 
        // Returns either undefined or an observable if I return one above
        console.log(res)
      }, error => { 
        console.log(error.error)
      })

function2 implementation:

public function2(request: RemoveSaleAgreedRequest): Observable<any>  { 
    console.log('api func hit!')
    return this.http.patch<any>(this.apiUrl + 'some/endpoint', request);
  }

It's my understanding that my code should evaluate the result of the anonymous function I provide to iif(). If it evaluates to true, function2 should be subscribed to, otherwise it should subscribe to of(undefined). function1 is subscribed to fine, however even though my anonymous function is evaluating to true, function2 is not being subscribed to. What am I doing wrong? Thanks!

Answer 1

You can't just call the iif operator like a function. iif returns an Observable which needs to be subscribed, ideally by an operator within your pipe.

Marking the callback as async will (probably) also cause problems. I don't think returning an Observable wrapped inside a Promise will be properly handled by RxJS. Mixing async and Observables is often not necessary. Let's wrap the call to this.promptSaleAgreedCancelDetails() into a from().

We can process result of this.promptSaleAgreedCancelDetails() in a switchMap. This switchMap logs the two variables and uses a normal if/else to handle the logic.

this.apiService
  .function1(id)
  .pipe(
    switchMap((saleAgreed: boolean) => {
      return from(this.promptSaleAgreedCancelDetails()).pipe(
        switchMap((cancelAgreedSale) => {
          console.log(`sale agreed: ${saleAgreed}`);
          console.log(`cancelSaleAgreed: ${cancelAgreedSale}`);

          if (saleAgreed && cancelAgreedSale) {
            this.removeSaleAgreedRequest = {
              contactId: this.cid,
              details: this.cancelSaleAgreedDetails,
            };
            return this.apiService.function2(this.removeSaleAgreedRequest)
          } else {
            return of(undefined)
          }
        })
      );
    })
  )
  .subscribe(
    (res) => console.log(res),
    (error) => console.log(error.error)
  );