How to use shareReplay for cache HTTP response with request params

user_3943632 0
Viewed 2411

I have a scenario like I need to fetch file content when click on a file. I want to cache the file content API with shareReplay(), how can I achieve it?

fileService.getContent is an API service which will fetch content with params(repository_id, filePath);

Question:

  • Where should I use the shareReplay() pipe? Inside API service? or the place I wrote below.
  • Below code does not work as expected. The API will be triggered multi-times. How can I cache the API with shareReplay() to call only once.

Component

fileOpened$ = new Subject();
...

this.fileOpened$.pipe(
    switchMap(file => this.fileService.getContent(this.repository_id, file.filePath)),
       shareReplay(1)
);

service:

getContent(repoId: string, path: string): Observable<string> {
    return this.http.get<string>(
        `/api/xxx/${repoId}/files/${decodeURIComponent(path)}`,
        {
            responseType: 'text' as 'json'
        });
}
rxjs6 rxjs-observables angular
2 Answers

I would add the shareReplay code in the service. Because of the parameters you can create a Map that caches the Observables.

Here the stackblitz I created to demonstrate.

user_67292950

The main context of service is to create a sharable code. At someplace you might need fresh result always from this api, right? Its better to have shareReplace in your component. Where you want it to provide you a replay. If you are sure this service method will not be used anywhere else. Having it on either side will not have any impact.

user_109829720
Related