HttpRequestCache

TS decorator for caching logic of API calls.

Inspired by How to use TS decorators to add caching logic to API calls

Installation

``
npm install @kovalenko/http-request-cache
`

Supported API

@HttpRequestCache((thisObj?: T, ...args: any[]) => HttpCacheOptions) — A method decorator that will cache data

thisObj is this object

args are decorated method's arguments

`typescript
interface HttpCacheOptions {
refCount?: boolean; // If refCount is true, the source will be unsubscribed from once the reference count drops to zero
windowTime?: number; // Maximum time length of the replay buffer in milliseconds
ttl?: number; // cache time to live before it will be refreshed. Unlike refreshOn: interval(1000), ttl will not refresh automatically
storage?: HttpCacheStorage; // if none specified, the default cache object will be used
refreshOn?: Observable | Subject | BehaviorSubject; // refresh trigger
}
`

`typescript
export interface HttpCacheStorage {
setItem(key: string, item: Observable): void; // sets cache
getItem(key: string): Observable | undefined; // gets cache
deleteItem(key: string): void; // deletes cache
}
`

Usage

$3

`typescript
@Injectable()
export class DataService {
refresh$ = new Subject();
constructor(private http: HttpClient) { }

@HttpRequestCache(dataService => ({
refreshOn: dataService.refresh$
}))
list(): Observable {
return this.http.get('assets/angular.json');
}
}
`

$3

`typescript
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }

@HttpRequestCache(dataService => ({
refCount: true // set refCount to true to unsubscribe cache
}))
list(): Observable {
return this.http.get('assets/angular.json');
}
}
`

$3

`typescript
@Injectable()
export class DataService {
refresh$ = new Subject();
constructor(private http: HttpClient, private cacheService: CacheService) { }

@HttpRequestCache(dataService => ({
storage: dataService.cacheService,
refreshOn: dataService.refresh$
}))
list(): Observable {
return this.http.get('assets/angular.json');
}
}
`

$3

`typescript
@Injectable()
export class DataService {
refresh$ = new Subject();
constructor(private http: HttpClient) { }

@HttpRequestCache((dataService, id: string) => ({
refreshOn: dataService.refresh$.pipe(filter(r => r === id))
}))
list(id: string): Observable {
return this.http.get('assets/angular.json');
}
}
`

$3

When someone subscribes list() method after TTL period, every subscription is being refreshed

`typescript
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }

@HttpRequestCache(() => ({
ttl: 5000
}))
list(): Observable {
return this.http.get('assets/angular.json');
}
}


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

constructor(
private http: HttpClient,
private dataService: DataService
) { }

ngOnInit(): void {
this.dataService.list().subscribe(g => {
console.log('1', g);
});

// outputs:
// 1 {...}

setTimeout(() => {
this.dataService.list().subscribe(g => {
console.log('2', g);
});
}, 1000);

// outputs:
// 2 {...}

setTimeout(() => {
this.dataService.list().subscribe(g => {
console.log('3', g);
});
}, 6000);

// outputs:
// 1 {...}
// 2 {...}
// 3 {...}

setTimeout(() => {
this.dataService.list().subscribe(g => {
console.log('4', g);
});
}, 8000);

// outputs:
// 4 {...}
}
}
`

$3


`typescript
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }

@HttpRequestCache()
list(): Observable {
return this.http.get('assets/angular.json');
}
}
``

License

MIT