Within my application, I have established a process where data is fetched from a remote server at regular intervals. The retrieved data is structured as an array of objects and is then showcased in the HTML template using the angular async pipe.
To enable caching functionality, I am utilizing shareReplay():
private refresherToggleSales$: Subject<void>;
private displayLastSales$: Observable<Sale[]>;
public InjectSale$: Subject<Sale[]>;
[...]
get LastSales() : Observable<Sale[]> {
if (!this.displayLastSales$) {
const rTimer$ = timer(0, DefaultRefresh);
this.displayLastSales$ = rTimer$.pipe(
switchMap(_ => this.getLastSales()),
shareReplay(this.CACHE_SIZE),
takeUntil(this.refresherToggleSales$)
);
}
return merge(this.displayLastSales$, this.InjectSale$);
}
private getLastSales() : Observable<Sale[]> {
// logic to fetch data from server
}
Whenever there is a manual input of sale data within the application, the aim is to display it promptly without waiting for server updates.
If InjectLastSale$.next() is called with a 1-element array, it replaces all existing data entirely.
How can both streams be merged without one being dependent on the other's completion?