DEV Community

RxJS: Caching Observables with a Decorator

Davide Cavaliere on September 03, 2019

Edit: The decorator hereby discussed is now available from npm. Install with npm i @microphi/cache or yarn add @microphi/cache I have been chas...
Read full post
Collapse
 
geddard profile image
Javier Baccarelli •

Looks fancy but it doesn't work for me :/ with th first block (without caring about the args) only the first call works, then nothing.
But when i update to care about different args, i just call the endpoint each time, even with the same args...

Collapse
 
davidecavaliere profile image
Davide Cavaliere •

Sorry for this late reply but somehow i missed your comment. The decorator is now available through npm please try to use it from @microphi/cache. If it still doesn't work please open an issue here issues

Collapse
 
geddard profile image
Javier Baccarelli •

I see that sometimes you use target[${propertyKey}_cached] and others this[${propertyKey}_cached]. Is that an error?
I tried tweaking that and it still fails

Collapse
 
sysmat profile image
Sysmat •

For me this doesn't work(@microphi/cache) it fetch only one id ok

Collapse
 
davidecavaliere profile image
Davide Cavaliere •

If you share your code maybe I can help.

Collapse
 
sysmat profile image
Sysmat •
  • service.ts: 
@Cache({
    ttl: 250
  })
  getUserNetIdById(id: number): Observable<string> {
    return this.http.get<AaiUser>(`${userPath}/${id}`, getHttpJwtOptions()).pipe(map(u => u.netId));
  }
Enter fullscreen mode Exit fullscreen mode
  • pipe.ts: 
@Pipe({
  name: 'getUserById'
})
export class GetUserByIdPipe implements PipeTransform {

  constructor(
    private readonly userService: UserService
  ) { }

  transform(id: number): Observable<string> {
    return this.userService.getUserNetIdById(id);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • template.html 
<tr *ngFor="let docSpec of docSpecs">
<td>
      <small>
            {{docSpec.user}}
            {{docSpec.user | getUserById | async}}
       </small>
</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

- wrong result in the template:

and for userId=1, 17 I get some result but should be different

- img :

Regards, TomaΕΎ

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
sysmat profile image
Sysmat •

hm I can't upload image

Thread Thread
 
davidecavaliere profile image
Davide Cavaliere •

Maybe a silly question but if you remove the @Cache decorator, do you actually get what you expect?
Is there anyway you can share the project so that i can run it?

Collapse
 
ex0dus profile image
Rory •

The second example works perfectly. Btw, can you fix the broken links in the post? I couldn't find a GitHub repo

Collapse
 
davidecavaliere profile image
Davide Cavaliere •

Thanks for point that up. I fixed it.