A cache plugin for Convoyr.
This plugin cache network requests using the cache-then-network strategy. First the plugin returns the data from cache, then sends the request, and finally comes with fresh data again. This technique drastically improve UI reactivity.
The plugin requires @convoyr/core and @convoyr/angular to be installed.
yarn add @convoyr/plugin-cacheor
npm install @convoyr/plugin-cacheThe whole configuration object is optional.
import { ConvoyrModule } from '@convoyr/angular';
import { createCachePlugin } from '@convoyr/plugin-cache';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
ConvoyrModule.forRoot({
plugins: [createCachePlugin()],
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}You can give a partial configuration object it will be merged with default values.
| Property | Type | Default value | Description |
|---|---|---|---|
addCacheMetadata |
boolean |
false |
Add cache metadata to the response body. |
storage |
Storage |
new MemoryStorage() |
Storage used to store the cache. |
shouldHandleRequest |
RequestCondition |
isGetMethodAndJsonResponseType |
Predicate function to know which request the plugin should handle. |
Here is an example passing a configuration object.
import { createCachePlugin, MemoryStorage } from '@convoyr/plugin-cache';
@NgModule({
imports: [
ConvoyrModule.forRoot({
plugins: [
createCachePlugin({
addCacheMetadata: true,
storage: new MemoryStorage(),
}),
],
}),
],
})
export class AppModule {}To know more about the shouldHandleRequest property check-out the conditional handling section.
You can add cache metadata to the response body and use it in the application. For example you can display something that showup that data are from cache.
Be careful because this option changes the body's shape and breaks existing code that need to access to the response body.
Here is an example showing a response body with addCacheMetadata set to false (default).
{ "answer": 42 }The same response body with addCacheMetadata set to true.
{
"data": { "answer": 42 },
"cacheMetadata": {
"createdAt": "2019-11-24T00:00:00.000Z",
"isFromCache": true
}
}Data are moved in a dedicated object and cache metadata are added.
| Property | Type | Default value |
|---|---|---|
maxSize |
`number | string` |
Default's storage size of the MemoryStorage is 100 requests. Above this limit, the least recently used response will be removed to free some space.
MemoryStorage max size can be configured when initializing the storage and the cache plugin.
ConvoyrModule.forRoot({
plugins: [
createCachePlugin({
storage: new MemoryStorage({ maxSize: 2000 }),
}),
],
});The maxSize can also be configured using human readable bytes format if a string is passed, for example:
ConvoyrModule.forRoot({
plugins: [
createCachePlugin({
storage: new MemoryStorage({ maxSize: '2000 b' }),
}),
],
});Supported units and abbreviations are as follows and are case-insensitive:
bfor byteskbfor kilobytesmbfor megabytesgbfor gigabytestbfor terabytespbfor petabytes
You can use any other kind of storage (e.g. Redis) by implementing the Storage interface.