Can not get it working

[btxtiger]

I have tried several combinations and configs, but it still does not work for me. This is my wrapper function for all HTTP requests in my application, anything I'm doing wrong? The Requests should not be shown or executed despite the caching right?

@Cacheable({
   maxAge: 60 * 1000 * 2
})
public GET(route: string, taskTitle?: string, responseType?: 'blob'): Observable<any> {
   const loadingTask = new LoadingTask(taskTitle);
   this.loadingSvc.addTask(loadingTask);

   return this.http
      .get(urlJoin(this.baseRoute, route), {
         reportProgress: true,
         observe: 'events',
         responseType: responseType,
         headers: {
            Authorization: this.jwtSvc.getJWT(),
         },
      })
      .pipe(
         tap((event) => {
            this.handleProgressEvents(event, loadingTask);
         }),
         filter((event: any) => event.type === HttpEventType.Response),
         map((event) => event.body),
         finalize(() => {
            this.loadingSvc.removeTask(loadingTask);
         }),
         catchError((error) => this.catchUnauthorizedError(error))
      );
}

[angelnikolov]

@btxtiger, if you use a single class for all your method calls, then you will only have one cache for each and every call. How are you using this service? Are you extending it or instantiating it in every caller? If you are extending it, you will essentially only have one cached method for all your app and that might be the reason for your issues. If that's your case, I suggest you taking the approach I described here: https://github.com/angelnikolov/ngx-cacheable/issues/63#issuecomment-572772109

[btxtiger]

@angelnikolov I see. It is a single Angular Injectable "backend.service.ts". I'm using it with Observable.pipe in sub services, so in I guess in worst case it should work by placing the decorator all over there?

I don't know exactly how the ts decorators work, wouldn't it be possible to use the route parameter as cache key and apply it before http.get(...?

[angelnikolov]

Yes, that would be possible, but then you'd need to provide a rather large maxCacheCount to the decorator like:

@Cacheable({
   maxCacheCount: 1000
})

Then you can have all of your services cache data to that method, just the way as you suggested - by providing a unique parameter as a cache key. Let's say you are on page /profile - you provide that parameter to each call. The other option is to cache separetely in each sub service (cleaner in my opinion). Let me know if you have any questions or you can also take a look at the unit tests where we have all cases covered. https://github.com/angelnikolov/ngx-cacheable/blob/master/specs/observable-cacheable.decorator.spec.ts

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.