Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

Question

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

I am currently working on creating a unique in-memory singleton that stores the vendor being viewed by a user.

A guard is implemented on all specific routes to capture the parameter:

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean | UrlTree> {

  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  return this._vendorService.getByName(param).pipe(map(a => {
    if (a == null) {
      this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
      return this._router.parseUrl(currentUrl);
    }
    return true;
  }));
}

A service is utilized to fetch the vendor by name. If it's present in memory, it's directly returned. Otherwise, it's fetched from the server first.

set vendor(value: IUser) {
  this._vendor.next(value);
}

get vendor$(): Observable<IUser> {
  return this._vendor.asObservable();
}

getByName(name: string): Observable<IUser> {
  const result = this.vendor$.pipe(map(v => {
    if (v != null && v.displayName == name) {
      return v;
    }
    else {
      return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(v => {
        this.vendor = v;
        return of(v)
        // ...
      }));
    }
  }))
  return result;
}

The issue lies in the fact that I need to verify vendor$ for its value returning an Obervable<IUser>, but the switchMap also provides an Obervable<IUser>, resulting in

Observable<Observable<IUser>>

. How can I ensure that the result only returns a single User Observable?

angular typescript rxjs rxjs-observables switchmap

Answer 1

Answer №1

It seems there may be a misunderstanding regarding the usage of switchMap(). It is not the reason for your

Observable<Observable<IUser>>

issue. The first map() operator inside the getByName() function is responsible for either returning a value of type IUser (true) or an observable of IUser (false). Therefore, getByName() will return either Observable<IUser> or

Observable<Observable<IUser>>

.

If you are looking to leverage replaying in-memory values from an observable, I recommend using shareReplay(). Here's a suggested pattern for such a scenario.

private vendorName = new Subject<string>();

public vendor$ = this.vendorName.pipe(
  distinctUntilChanged(),
  switchMap(name=>this.Get<IUser>(`api/vendor/${name}`)),
  shareReplay(1)
)

public getByName(name:string){
  this.vendorName.next(name);
}

Then, in the guard file:

canActivate(
  // ...
){
  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  this._vendorService.getByName(param);

  return this._vendorService.vendor$.pipe(
    map(vendor=>{
      if(!vendor){
        this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
        return this._router.parseUrl(currentUrl);
      }
      return true;
    })
  );

With this setup, your component(s) and guard can subscribe to vendor$ to access the required IUser data. When you have the vendor name to retrieve, simply call getByName(). This will trigger the following steps:

The userName subject will emit the new name.
The vendor$ observable (subscribed to userName) will use that name to fetch the value from the inner observable (the Get method).
The shareReplay(1) ensures that any subscription to vendor$ (current or future) will receive the last emitted value stored in memory.

To update the vendor name, simply call getByName() with the new name, and all subscriptions to vendor$ will automatically reflect the updated value.

Answer 2

It seems there may be a misunderstanding regarding the usage of switchMap(). It is not the reason for your

Observable<Observable<IUser>>

issue. The first map() operator inside the getByName() function is responsible for either returning a value of type IUser (true) or an observable of IUser (false). Therefore, getByName() will return either Observable<IUser> or

Observable<Observable<IUser>>

.

If you are looking to leverage replaying in-memory values from an observable, I recommend using shareReplay(). Here's a suggested pattern for such a scenario.

private vendorName = new Subject<string>();

public vendor$ = this.vendorName.pipe(
  distinctUntilChanged(),
  switchMap(name=>this.Get<IUser>(`api/vendor/${name}`)),
  shareReplay(1)
)

public getByName(name:string){
  this.vendorName.next(name);
}

Then, in the guard file:

canActivate(
  // ...
){
  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  this._vendorService.getByName(param);

  return this._vendorService.vendor$.pipe(
    map(vendor=>{
      if(!vendor){
        this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
        return this._router.parseUrl(currentUrl);
      }
      return true;
    })
  );

With this setup, your component(s) and guard can subscribe to vendor$ to access the required IUser data. When you have the vendor name to retrieve, simply call getByName(). This will trigger the following steps:

The userName subject will emit the new name.
The vendor$ observable (subscribed to userName) will use that name to fetch the value from the inner observable (the Get method).
The shareReplay(1) ensures that any subscription to vendor$ (current or future) will receive the last emitted value stored in memory.

To update the vendor name, simply call getByName() with the new name, and all subscriptions to vendor$ will automatically reflect the updated value.

Answer 3

Answer №2

in my observation, the vendor$ appears to be a sequence of IUser. To enhance your code, I suggest utilizing the iif rxjs operator for subscribing to either the first or second observable based on a specific condition.

 this.vendor$.pipe(
    mergeMap(v => iif(
      () => v && v.displayName == name, of(v), this.Get<IUser>(`url`).pipe(tap(v => this.vendor = v))
     )
    )
  )

Answer 4

in my observation, the vendor$ appears to be a sequence of IUser. To enhance your code, I suggest utilizing the iif rxjs operator for subscribing to either the first or second observable based on a specific condition.

 this.vendor$.pipe(
    mergeMap(v => iif(
      () => v && v.displayName == name, of(v), this.Get<IUser>(`url`).pipe(tap(v => this.vendor = v))
     )
    )
  )

Answer 5

Answer №3

Here is an additional solution that I found effective:

When dealing with the canActivate method that also returns a Promise, you can take advantage of the reliable async and await approach.

It's worth noting that in rxjs 7, the toPromise method has been replaced by lastValueFrom.

async getUserByVendorName(name: string): Promise<IUser> {
  const user:IUser = await new Promise(resolve => { 
    this.vendor$.subscribe(data => {
      if (data != null && data.displayName.toLocaleLowerCase() == name) {
        resolve(data);
      }
    });
    // Resolve with null if no matching data is found
    resolve(null);
  });

  if (user == null) {
    return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(result => {
      this.vendor = result;
      return of(result);
    })).toPromise();

  }
  return Promise.resolve(user);
}

Answer 6

Here is an additional solution that I found effective:

When dealing with the canActivate method that also returns a Promise, you can take advantage of the reliable async and await approach.

It's worth noting that in rxjs 7, the toPromise method has been replaced by lastValueFrom.

async getUserByVendorName(name: string): Promise<IUser> {
  const user:IUser = await new Promise(resolve => { 
    this.vendor$.subscribe(data => {
      if (data != null && data.displayName.toLocaleLowerCase() == name) {
        resolve(data);
      }
    });
    // Resolve with null if no matching data is found
    resolve(null);
  });

  if (user == null) {
    return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(result => {
      this.vendor = result;
      return of(result);
    })).toPromise();

  }
  return Promise.resolve(user);
}

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

Answer №1

Answer №2

Answer №3

Similar questions

React component's state is not being correctly refreshed on key events

Angular is set up to showcase every single image that is stored within an array

Is the RouterModule exclusively necessary for route declarations?

Encountering an error message stating "The variable 'App' is declared but not used" when running the index.tsx function

Issue with Angular Datatable not displaying content when [dtTrigger] directive is included in the HTML table - Angular 14

Using `it` with accessing class members

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

What could be causing TypeORM to create an additional column in the query

Is there a way to display only the year in the Angular ngx boostap 2.0.5 datepicker?

Uncover the content of a base64 encoded string and convert it into

Versions of Angular that are compatible with Ionic 2 (do not have an exported member)

Enhancing Readability of Public Static Member Variables in Typescript

Angular2: Unusual behavior when using angular-http Headers

What is the process for injecting a template into the Kendo Upload's template?

Leverage the power of Firebase Firestore by seamlessly integrating full-text search capabilities with external services while also

Containerizing Next.js with TypeScript

Mastering the Art of Promises in RXJS Observables

tinyMCE5 has a quirky habit of inserting p tags without warning, but only when using

Guide on Generating Dynamic JSON to Set and Retrieve Values for Forms and Displaying the Bound Values

Guide to invoking an API in Next.js 13 by utilizing specific variables within a client component