https://github.com/erqk/angular-http-cache-interceptor
Cache HTTP response in Angular using interceptor
https://github.com/erqk/angular-http-cache-interceptor
Last synced: 4 months ago
JSON representation
Cache HTTP response in Angular using interceptor
- Host: GitHub
- URL: https://github.com/erqk/angular-http-cache-interceptor
- Owner: erqk
- Created: 2024-07-07T04:54:41.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-01-03T03:09:11.000Z (5 months ago)
- Last Synced: 2025-01-03T04:20:29.828Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 10.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular HTTP cache interceptor
## Playground
https://stackblitz.com/edit/stackblitz-starters-5anpgv?file=src%2Fmain.ts
## Usage
Add this interceptor in the `httpCacheInterceptor` provider. It must be put at the last one, to able to cache all the requests.
```tsx
...
bootstrapApplication(App, {
providers: [
provideHttpClient(
withInterceptors([
...
httpCacheInterceptor({
urlsNotToCache: ['/products/categories'],
ttls: { 'https://dummyjson.com/products': 1000 },
globalTTL: 3000,
}),
])
),
],
});
```
There are 3 options available:
### `urlsNotToCache`
The URLs that you don't want it to be cached. Supports regex.
### `ttls`
The key value pairs to customize ttl of the specific URL. The priority is higher than `globalTTL`.
- The key must exclude query string, and always starts from the end of the URL.
#### Example
```ts
// https://www.domaintesting.com/api/dataA/partA?query=foo
{
ttls: {
'/api/dataA/partA': 10000,
...
}
}
```
### `globalTTL`
The global ttl to all the URLs.
## Angular version < 15
The interceptor is a functional interceptor, which is introduced after Angular 15. Modify the code to use it in the Angluar version below 15.