Can this function be rewritten in a manner that does not involve returning undefined?

Question

Can this function be rewritten in a manner that does not involve returning undefined?

Using angular fire, I am fetching data from firestore based on the logged-in user. After ensuring that the user object has been retrieved, I have a command to monitor changes in the document.

async fetchUserCards() {
  let _user: UserModel = await this.authService.retrieveUser();

  if (_user) {
    return this.angularFirestore
      .collection<Card>('cards', (ref) =>
        ref.where('owner', '==', _user?.uid)
      )
      .valueChanges();
  } else {
  }
}

As there is an If check for the user, the function's signature becomes Promise<Observable<board[]> | undefined>. How can I eliminate the need for 'undefined' (what should I do in the else block)?

angular typescript rxjs

Answer 1

Answer №1

To make your code more concise, you can streamline it to return the Observable<Board[]> directly instead of returning a Promise. Here is how you can achieve that:

// import { from, Observable } from 'rxjs';
// import { filter, mergeMap } from 'rxjs/operators';

getUsersCards(): Observable<Board[]> {
  // If `this.authService.GetUser()` returns an Observable, you can use it without the need for the `from` function.
  // The `from` function is typically used to convert Promises into Observables.
  return from(this.authService.GetUser()).pipe(
    filter((user) => !!user),
    mergeMap((user) =>
      this.angularFirestore
        .collection<Card>('cards', (ref) =>
          ref.where('owner', '==', user?.uid)
        )
        .valueChanges()
    )
  );
}

You can then utilize this function in your component or service as shown below:

getUsersCards().subscribe((res: Board[]) => console.log(res));

Answer 2

To make your code more concise, you can streamline it to return the Observable<Board[]> directly instead of returning a Promise. Here is how you can achieve that:

// import { from, Observable } from 'rxjs';
// import { filter, mergeMap } from 'rxjs/operators';

getUsersCards(): Observable<Board[]> {
  // If `this.authService.GetUser()` returns an Observable, you can use it without the need for the `from` function.
  // The `from` function is typically used to convert Promises into Observables.
  return from(this.authService.GetUser()).pipe(
    filter((user) => !!user),
    mergeMap((user) =>
      this.angularFirestore
        .collection<Card>('cards', (ref) =>
          ref.where('owner', '==', user?.uid)
        )
        .valueChanges()
    )
  );
}

You can then utilize this function in your component or service as shown below:

getUsersCards().subscribe((res: Board[]) => console.log(res));

Can this function be rewritten in a manner that does not involve returning undefined?

Answer №1

Similar questions

Angular 9 introduces a new feature where canActivate now supports Observable<boolean> which provides a more robust error handling mechanism for failed

Exploring nested JSON responses in Angular 2 with TypeScript

The error message "Property 'DecalGeometry' is not found in the type 'typeof "..node_modules/@types/three/index"'."

Unexpected termination during the npm installation process without providing a clear error message

Upgrade your buttons with dropdowns from Bootsrap to ng-bootstrap for a fresh new look

Angular2/4 preflight request encountered an invalid response which resulted in a redirect

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

Enhance typescript interfaces with third-party library components in React.js

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

Utilizing external clicks with Lit-Elements in your project

Ionic's ion-back-button is only navigating back to the defaultHref

Issue with rejecting a promise within a callback function in Ionic 3

Interacting with backend APIs using Angular 2

Issue with border radius in MUI 5 affecting table body and footer elements

HTML not updating after a change in properties

Using NextJS: Issue with updating Value in useState

What is the best way to address this conflicting Angular node package module dependency?

Is there a way to use router.navigate conditionally when navigating?

Error TS2351: You cannot utilize the 'new' keyword with an expression that does not have a call or construct signature