Angular — Simple In Memory Cache Service with RxJS

This post is about an experimental approach and I am sure there are other approaches for solving a similar problem. If so, please comment on this article.

Demo: https://ashwin-sureshkumar.github.io/angular-cache-service-blog/ Note: open the developer console to see log messages

Github Repo: https://github.com/ashwin-sureshkumar/angular-cache-service-blog

Stackblitz Editor: https://stackblitz.com/edit/angular-simple-cache-service-with-rxjs

What is Cache in our context ?

Cache is a simple data storage to store data so that it can be accessed faster the next time the same info is needed to improve performance and user experience. Here, the data can be a derived/calculated value or duplicate data/requests made from different sections of the application.

What are the requirements for our Cache Service ?

1. An Injectable Cache Service
2. Ability to set an expiration for each item.
3. An Observable based service
4. Ability to track in-flight requests so duplicate requests are never made.

What are we implementing to use this Cache Service?

We are going to build a simple list of stories from Hackernews API to show the top stories from their homepage and implement infinite scroll to load more data.

To make things interesting, I want to show the Karma of the author for each post but Karma is not returned in the stories API call. It has to be fetched for each user with a separate API call. So as we load the list, we will pick the author and make an API call to populate the karma of the user. So if incase the same user is repeated in the list, we will end up making multiple calls without any kind of caching service.

Note: This is a made up scenario to demonstrate the usage of a cache service.

We will see cache service code, the demo of the implementation and then break the code into sections for a walk through.

In the above gif I am logging the API calls (purple), notifying the inflight observables (blue) and when the data is received from cache (green).

Demo: https://ashwin-sureshkumar.github.io/angular-cache-service-blog/ Note: open the dev console to log messages

Breaking it down !

We initialize three properties to our service,

1. A Map for holding our cached data with a given key
2. A Map for holding a subject for our inflight observables
3. Default max age for cache data.

Let’s look at get method

get method does few things,

• If the requested key exists in the cache, then return the cached data
• If there is an existing in flight request, then return the subject for that key
• If there is a fallback provided, then set the inFlight subject and return the callback with a side effect (do) method chain which calls the set method.
• Finally throw an error

The set method is pretty straight forward, set the given the data in cache and notifies all the subscribers with data.

notifyInFlightObservers check if key exists in inFlightObservables and if there are subscribers for the key.

How to use the Cache Service?

It is very straight forward, I am calling the cacheService.get with id (key for the cache) and fallback as the API call here and thats it.

This is a simple implementation of a caching service on the UI layer. Hope this brings in some thoughts and other implementation ideas.

If you liked this post, please share, comment and recommend.

Related Articles

Angular — Simple Infinite scroller directive with RxJS Observables: https://codeburst.io/angular-2-simple-infinite-scroller-directive-with-rxjs-observables-a989b12d4fb1

Naive Infinite scroll in Reactive Programming using RxJS Observables https://hackernoon.com/naive-infinite-scroll-in-reactive-programming-using-rxjs-observables-4a605d3146e8