Je souhaite réutiliser le résultat d'un flux RxJS sans l'exécuter à nouveau.Angular RxJS empêche les appels d'API doubles
Dans un composant, j'ai des flux Input(): query$
et category$
. Je veux convertir cela en deux flux qui partagent la même source d'API. En ce moment, il fait deux demandes. Je voudrais avoir une seule demande.
Code simplifié:
this.searchResults$ = this.query$
.switchMap((query) => this.httpClient.get(`/whatever?q=${query}`));
this.filteredSearchResults$ = Observable
.combineLatest(this.searchResults$, this.category$)
.filter(([ searchResults, category ]) => {
// Code to make a subset
return ['a', 'subset'];
});
Je consomme deux searchResults $ et filteredSearchResults $ dans le même composant:
<ng-container *ngIf="(searchResults$ | async) as searchResults">
<ng-container *ngIf="(filteredSearchResults$ | async) as filteredSearchResults">
</ng-container>
</ng-container>
Maintenant, je comprends pourquoi il y a deux appels API. Je ne vois aucun moyen de l'empêcher.
Il travaille maintenant en partie. Sur pageload les deux flux fonctionnent comme prévu. Mais dès qu'une des requêtes $ ou category $ change, j'obtiens une requête supplémentaire avec les anciennes valeurs. Ainsi qu'une demande normale avec les nouvelles valeurs. –