Call returns Observable instead of actual object

Question

My call to this.dashboardFacade.getCurrentUser(uid).then((user) => console.log(user)); keeps returning an Observable object instead of the actual data object - does anyone know how to fix it?

DashboardComponent

this.dashboardFacade.getCurrentUserUid().then((uid) => {
  if (uid) {
    this.dashboardFacade.getCurrentUser(uid).then((user) => console.log(user));
  }
});

DashboardFacade

  getCurrentUser(uid: string): Promise<unknown> {
    return this.userService.getUser(uid);
  }

UserService

  getUser(uid: string): Promise<unknown> {
    return firebase
      .auth()
      .currentUser.getIdToken()
      .then((token: string) => {
        this.logger.debug(`Token generated: ${token}`);
        return this.httpClient
          .get(`${environment.apiBasePath}/users`, {
            headers: { authorization: `Bearer ${token}` },
          })
      });
  }

Trying to do:

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).subscribe(
     (user) => console.log(user)
    )
  }
});

throws the following error:

Uncaught (in promise): TypeError: this.dashboardFacade.getCurrentUser(...).subscribe is not a function TypeError: this.dashboardFacade.getCurrentUser(...).subscribe is not a function in DashboardComponent

Answer 1

In javascript you have what we call Promise Chain. It happen when I promise return a Promise, the intermediate promise are kinda invisible and you receive the result of the last resolved promise of the chain.

your method getUser return a Promise, but this Promise actually don't return another promise but an Observable, in this case chain promise are not involved and you receive an Observable. What you can do it to transform your method to actually return a Promise if you don't need to observable :

  getUser(uid: string): Promise<unknown> {
    return firebase
      .auth()
      .currentUser.getIdToken()
      .then((token: string) => {
        this.logger.debug(`Token generated: ${token}`);
        return this.httpClient
          .get(`${environment.apiBasePath}/users`, {
            headers: { authorization: `Bearer ${token}` },
          }).toPromise();                       <<<< transform to observable as promise
      });
  }

About your error this is also "normal"

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).subscribe(
     (user) => console.log(user)
    )
  }
});

this.dashboardFacade.getCurrentUser(uid) actually return a Promise (of Observable) not an Observable, so you need to wait the promise to be resolved before subscribing

could be something like this (if you keep observable in the getUser method)

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).then(currentUserOsb => {
        currentUserObs.subscribe(user => console.log(user));
    });
  }
});