The Best New Way To Cache API Responses with Angular & RxJs

The time has come, clean RxJs time-based caching is now possible! 📸 by Elena Koycheva & 🎨 by Tomas Trajan

Hey folks! Welcome 👋

This article is a rather special one!

Over the years, I’ve repeatedly got caught up in trying to implement this use case in a clean way. Often involving many colleagues, spending a bit too much time, but always without proper success.

Even though we could always come up with a working solution , the solution we got felt down right dirty…

Until now…

Today we’re going change that and learn about the best new way to implement time based caching for the API responses (or any other) RxJs streams in our Angular applications!

☕ This article is pretty focused on a single topic so you should be able to get through it in one go, still TLDR; can’t hurt nobody 😉

TLDR

• Original example use case of retrieving and caching the apiKey
• Previous approaches how to solve it (before RxJs 7.1) and their flaws
• New better solution with the help from improved share operator made available in RxJs 7.1+
• Refactoring our original implementation
• Caveats, gotchas and comparing possible solutions and their trade-offs
• Working solution (StackBlitz) &…