Encountering a syntax issue with pipeable operators in Angular Rxjs

Question

Encountering a syntax issue with pipeable operators in Angular Rxjs

I am currently in the process of rewriting this code snippet:

Observable
    .merge(this.searchQuery$, this.lazyQuery$)
    .do(() => this.loadingPage())
    .map(filter => this.buildURL("jaume", Config.security['appName'], filter))
    .switchMap(url =>
        this.service.getItemsFromStorage(url)
        .map(response => this.buildPage(response))
        .catch(() => Observable.of(pojo.Page.EMPTY))
    )
    .do(page => this.loadedPage(page))
    .takeUntil(this.unsubscribe$)
    .subscribe();

My goal is to utilize "pipable" syntax. So far, I have been able to rewrite it as follows:

this.searchQuery$.pipe(
    merge(this.lazyQuery$),
    tap(() => this.loadingPage()),
    map(filter => this.buildURL("jaume", Config.security['appName'], filter))
)
.pipe(
    switchMap(url => this.service.getItemsFromStorage(url)),
    catchError(() => Observable.of(pojo.Page.EMPTY))
)
.pipe(
    tap(page => this.loadedPage(page))  <<***>>
);

However, I am encountering a compiler error on <<***>>:

Argument of type 'Response | Page' is not assignable to parameter of type 'Page'. Type 'Response' is missing the following properties from type 'Page': total, users

It appears that the catchError is returning a {} | Page type when it should be returning a single Page type.

Any insights on how to resolve this issue?

angular typescript rxjs

Answer 1

Answer №1

You forgot to link a response to a page.

merge(this.searchQuery$, this.lazyQuery$).pipe(
  tap(() => this.loadingPage()),
  map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
  switchMap(url => this.service.getItemsFromStorage(url).pipe(
    map(response => this.buildPage(response)), // <-- don't forget this map in your code
    catchError(() => of(pojo.Page.EMPTY))
  )),
  tap(page => this.loadedPage(page)),
  takeUntil(this.unsubscribe$)
).subscribe();

Don't forget to refer to the official migration guide for more information: Howto: Convert to pipe syntax

Answer 2

You forgot to link a response to a page.

merge(this.searchQuery$, this.lazyQuery$).pipe(
  tap(() => this.loadingPage()),
  map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
  switchMap(url => this.service.getItemsFromStorage(url).pipe(
    map(response => this.buildPage(response)), // <-- don't forget this map in your code
    catchError(() => of(pojo.Page.EMPTY))
  )),
  tap(page => this.loadedPage(page)),
  takeUntil(this.unsubscribe$)
).subscribe();

Don't forget to refer to the official migration guide for more information: Howto: Convert to pipe syntax

Answer 3

Answer №2

Firstly, there is an excessive amount of pipes being used unnecessarily. Consider simplifying. Additionally, you can utilize of() instead of Observable.of() for a shorter and clearer code.

this.searchQuery$.pipe(
    merge(this.lazyQuery$),
    tap(() => this.loadingPage()),
    map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
    switchMap(url => this.service.getItemsFromStorage(url)),
    catchError(() => of(pojo.Page.EMPTY)),
    tap(page => this.loadedPage(page))  <<***>>
);

This approach should work effectively.

The error lies in TypeScript's interpretation of the return value, not in the functionality itself. Specify the return type explicitly, like so:

...
catchError(() => of(<Page>pojo.Page.EMPTY))
...

If the issue pertains to the catchError section.

Update #1 - Nesting

If you only need to apply a specific pipe at a particular point in the chain, insert the pipe where the observable is returned. For instance:

...
switchMap(() => of(null).pipe(
  catchError(...)
))

Instead of chaining multiple .pipe() methods like:

.pipe(...),
.pipe(...),
.pipe(...),

You can consolidate them into one:

.pipe(
...
...
...
)

Answer 4

Firstly, there is an excessive amount of pipes being used unnecessarily. Consider simplifying. Additionally, you can utilize of() instead of Observable.of() for a shorter and clearer code.

this.searchQuery$.pipe(
    merge(this.lazyQuery$),
    tap(() => this.loadingPage()),
    map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
    switchMap(url => this.service.getItemsFromStorage(url)),
    catchError(() => of(pojo.Page.EMPTY)),
    tap(page => this.loadedPage(page))  <<***>>
);

This approach should work effectively.

The error lies in TypeScript's interpretation of the return value, not in the functionality itself. Specify the return type explicitly, like so:

...
catchError(() => of(<Page>pojo.Page.EMPTY))
...

If the issue pertains to the catchError section.

Update #1 - Nesting

If you only need to apply a specific pipe at a particular point in the chain, insert the pipe where the observable is returned. For instance:

...
switchMap(() => of(null).pipe(
  catchError(...)
))

Instead of chaining multiple .pipe() methods like:

.pipe(...),
.pipe(...),
.pipe(...),

You can consolidate them into one:

.pipe(
...
...
...
)

Encountering a syntax issue with pipeable operators in Angular Rxjs

Answer №1

Answer №2

Update #1 - Nesting

Similar questions

Creating a React component with a column allowing multiple checkbox selections in NextUI table

Tips for optimizing file sizes in an Angular 11 app for production deployment

Navigating the use of property annotations in Mapped Types with remapped keys

Guide to reference points, current one is constantly nonexistent

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Incorporating Kekule.js into a TypeScript-based React application

Tips for filtering data using an array within an object containing arrays

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Programmatically initiate form submission in Angular with dynamic status and classes

Tips for accessing and manipulating an array that is defined within a Pinia store

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

Encountering an error of ExpressionChangedAfterItHasBeenCheckedError while trying to refresh the

What is the process for importing types from the `material-ui` library?

Troubleshooting the ReferenceError: Blob is not defined problem with the heic2any library in a Next.js application

Invoking a Typescript function from the Highcharts load event

Is there a way to dynamically define the return type of a function in Typescript?

TypeScript - ESBuild - Encountered an unexpected '<' token

Restrict the properties of an object to match the properties of a different object

Mysterious issue arises during deployment of Typescript-React application on Heroku