useEffectEvent
: Goodbye to stale closure headachesDiscover why the useEffectEvent Hook is important, how to use it effectively, and how it compares to useRef.
Shadcn CLI 3.0 takes component management to a new level. With namespaced registries, private access, and AI-powered discovery, it’s now faster and smarter to build React UIs.
Zod’s flexibility comes at a cost. This article breaks down why Zod is slower than AOT-compiled validators like Typia, and how to fix it with a build-time optimization that brings production-grade performance.
Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 15th issue.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
12 Replies to "Caching with HttpInterceptor in Angular"
Nice article, rookie mistake though! As long as you’re using `req: HttpRequest` as the key for your map, it’ll never use cache
Can you explain more?
`req: HttpRequest` is used as key in the cache as said by Angular docs.
you’re right, I tested and it does not work of course because each request is new object
How do we know/When to send the reset flag ‘true’ for getting the updated response?
return next.handle(req).pipe(
do(stateEvent => {
if(stateEvent instanceof HttpResponse) {
this.cache.set(req, stateEvent.clone())
}
})
).share()
this line of code create issue can you update it for angular 13 the main problem is i sent requst to bind table and i delete item from table and sent request its get reponce from cache please tell me how to fix this type of issue
I’m curious, why use .share() at the end?
Great article!
I just had to change the Map type to `Map<string, HttpResponse>`, where string is `req.urlWithParams`. With these few tweaks I was able to get mine to work.
This solution doesn’t work. Angular doesn’t pass the same HttpRequest instance between the same requests. So, you can’t cache using request object, need to use some combination of its fields.
`share` at the end is needed to make `do` (or `tap`) run only once
What about making the get full URL with parameters string has the key of the cache map ? That will identify the particular request
I have presist the cache even during the page refresh. How to do it with localStorage instead of Map?
Aside from the other issues highlighted in the comments, won’t this just grow memory with all the requests/responses? For an enterprise app, this means client side growth will be huge, and things will be cached even when we don’t want them to be.