ngx-dedup
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

ngx-dedup

Route based request deduplication for your Angular application

NPM version

Read a more detailed article here

Introduction

Many components in an Angular app need to use the same data. With ngx-dedup you do not have to fetch data globally, nor forward it via input properties. Instead you can fetch data within your components without worrying about the performance implications of making multiple requests for the same data. ngx-dedup intercepts all requests and automatically deduplicates requests based on the URL and options.

Ngx Starport

How is this different from a caching library?

With the default configurations ngx-dedup only caches requests based on the current active route path. This way your data stays up to date during navigation but different components never cause a duplicated request.

Install

npm i ngx-dedup

Usage

To use ngx-dedup, add the NgxDedupModule to your imports in your app.module.ts. and include the DedupInterceptor in the providers array.

import { NgxDedupModule } from "ngx-dedup";

@NgModule({
  imports: [NgxDedupModule.forRoot()], //Add to your imports
  bootstrap: [AppComponent],
})
export class AppModule {}

With this minimal setup all GET request are deduplicated.

Configuration

You can pass a configuration object via forRoot(). Please see the list below for all config options.

 NgxDedupModule.forRoot({
      isRouteBased: true,
      isLoggingEnabled: false,
      maxAge: 10000,
      maxChacheSize: 100,
      isCachable: (request: HttpRequest<any>) => request.method === 'GET'
 }),
Property Default Value Description
isRouteBased true If set to true requests are only deduplicated on the current active route path
isLoggingEnabled false If set to true all interactions within NgxDebug are logged to the console
maxAge undefined Sets the maximum caching age in milliseconds. By default requests have no maxAge.
maxCacheSize 100 Limits the number of cachable items
isCachable request.method === 'GET' By default all GET requests are cachable. Use custom logic to overwrite this behavior

Skip the cache for certain requests

If you want certain requests to skip the cache (e.g. to force a refresh of your data), you can set the NGX_DEDUP_SKIP_CACHE token of the HttpContext to true

const context = new HttpContext().set(NGX_DEDUP_SKIP_CACHE, true);
this.http.get('https://swapi.dev/api/people/1', { context });

Remove certain requests from cache

To remove specific requests from cache, inject the NgxDedupService in your constructor and call the removeFromCache() method. Pass the requests URL + queryParams as the key.

constructor(private _ngxDedupService: NgxDedupService) { }

someMethod(): void {
  this._ngxDedupService.removeFromCache('https://swapi.dev/api/people/1');
}

Remove all requests from cache

To remove all requests from cache, inject the NgxDedupService in your constructor and call the clearCache() method.

constructor(private _ngxDedupService: NgxDedupService) { }

someMethod(): void {
  this._ngxDedupService.clearCache();
}

Package Sidebar

Install

npm i ngx-dedup

Weekly Downloads

4

Version

0.0.9

License

none

Unpacked Size

78.3 kB

Total Files

24

Last publish

Collaborators

  • kasual1