I'm using RxJS (via Angular2) to retrieve blog-posts from the WordPress REST API.

I've implemented caching on the Observable for "get all blog-posts" (i.e. blog list) via the example outlined here and everything is working great:

http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

But I'm a little stuck when it comes to retrieving/caching individual blog-posts.

Currently a fresh request is sent to "get blog-post by slug" whenever a blog-post is needed - no caching here and I would like to add some.

What I'm struggling with is - the above works fine for an individual GET for all posts. There's only ever going to be 1 Observable here.

But I'm not sure how to implement it for an arbitrary number of Observables related to getting individual posts.

Are there any ideas on how to best go about this?

Edit: from a link in the comments this helps me explain things a bit clearer:

const observable = Observable.defer(
    () => actualFn().do(() => this.console.log('CACHE MISS', cacheKey))
  )
  .publishReplay(1, this.RECACHE_INTERVAL)
  .refCount().take(1)
  .do(() => this.console.log('CACHE HIT', cacheKey));

Putting the Observable into a const is okay for the "get all blog-posts" as it is always the same request.

But how do I do similar for a get blog-post with arbitrary identifier?

I've been considering putting the Observables into an array or tuple with the blog-post identifier as the key. But I'm not hugely experienced in this area so wanting to check that I'm not missing a way to go about it with the RxJS - either that or something completely obvious :0