In this post, we’re going to add [rx-query](https://github.com/timdeschryver/rx-query) to the Angular Tour of Heroes while pointing out the benefits of rx-query. Before we start, I just want to mention that rx-query is inspired by react-query and SWR.

rx-query provides an easy way to fetch data over HTTP. This is already the case withing Angular applications, so why should you care? Because adding rx-query is no extra work, and you get some useful features for free.

A query has a status

Making an HTTP request with rx-query is almost as simple as a normal request, just wrap the request with the query method and give it the query a key. The key is to distinguish multiple queries, it will become clear why this is important in the next sections.

heroes.components.ts
import { query } from 'rx-query'

export class HeroesComponent {
  heroes$ = query('heroes-list', () => this.heroService.getHeroes())

  constructor(private heroService: HeroService) {}
}

Just like a normal request, the query method returns an Observable (Observable<QueryOutput<T>>). This Observable emits a value for each stage of the request (success, error, loading, refreshing). This is exposed with the status property on the output, and by using the status in combination with the [ngSwitch](https://angular.io/api/common/NgSwitch) directive it’s easy to show a different view for each stage of the request.

While it’s not required to create a view for the different stages, it requires the attention of the developer to think about the un-happy paths. Leading to a better user experience.

heroes.component.html
<ng-container *ngIf="heroes$ | async as query">
  <ng-container [ngSwitch]="query.status">
    <ul class="heroes" *ngSwitchDefault>
      <li *ngFor="let hero of query.data">
        <a routerLink="/detail/{{ hero.id }}">
           {{ hero.id }} {{ hero.name }}
        </a>
      </li>
    </ul>

    <div *ngSwitchCase="'loading'">Loading ...</div>
    <div *ngSwitchCase="'error'">Error ({{query.error}})</div>
  </ng-container>
</ng-container>

Resulting in the following:

A loading indicator is visible while the request is pending, when the request returns a response the heroes are shown.In this post, we’re going to add [rx-query](https://github.com/timdeschryver/rx-query) to the Angular Tour of Heroes while pointing out the benefits of rx-query. Before we start, I just want to mention that rx-query is inspired by react-query and SWR.

rx-query provides an easy way to fetch data over HTTP. This is already the case withing Angular applications, so why should you care? Because adding rx-query is no extra work, and you get some useful features for free.

A query has a status

Making an HTTP request with rx-query is almost as simple as a normal request, just wrap the request with the query method and give it the query a key. The key is to distinguish multiple queries, it will become clear why this is important in the next sections.

heroes.components.ts
import { query } from 'rx-query'

export class HeroesComponent {
  heroes$ = query('heroes-list', () => this.heroService.getHeroes())

  constructor(private heroService: HeroService) {}
}

Just like a normal request, the query method returns an Observable (Observable<QueryOutput<T>>). This Observable emits a value for each stage of the request (success, error, loading, refreshing). This is exposed with the status property on the output, and by using the status in combination with the [ngSwitch](https://angular.io/api/common/NgSwitch) directive it’s easy to show a different view for each stage of the request.

While it’s not required to create a view for the different stages, it requires the attention of the developer to think about the un-happy paths. Leading to a better user experience.

heroes.component.html
<ng-container *ngIf="heroes$ | async as query">
  <ng-container [ngSwitch]="query.status">
    <ul class="heroes" *ngSwitchDefault>
      <li *ngFor="let hero of query.data">
        <a routerLink="/detail/{{ hero.id }}">
           {{ hero.id }} {{ hero.name }}
        </a>
      </li>
    </ul>

    <div *ngSwitchCase="'loading'">Loading ...</div>
    <div *ngSwitchCase="'error'">Error ({{query.error}})</div>
  </ng-container>
</ng-container>

Resulting in the following:

A loading indicator is visible while the request is pending, when the request returns a response the heroes are shown.

#angular #rxjs