Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/terzurumluoglu/ng-memento

an angular library for caching api request
https://github.com/terzurumluoglu/ng-memento

Last synced: 4 months ago
JSON representation

an angular library for caching api request

Awesome Lists containing this project

README

        

# NgMemento

ng-memento makes your application faster by preventing the same http requests from being called again in your Angular project.

## Installation

```bash
npm i ng-memento --save
```

## Demo

### Example

The application was built by using this library. [Visit](https://ng-memento-web.onrender.com/users)

### Image

![til](https://ng-memento-web.onrender.com/assets/demo.gif)

## Stable Versions

| Angular version | ng-memento version |
| :-------------- | :----------------- |
| `v13.x.x` | `v3.x.x` |
| `v14.x.x` | `v4.x.x` |
| `v15.x.x` | `v5.x.x` |
| `v16.x.x` | `v6.x.x` |
| `v17.x.x` | `v7.x.x` |
| `v18.x.x` | `v8.x.x` |

## Documentation

### How can I use?

```typescript
import { NgMementoModule, IMementoConfig } from "ng-memento";

const config: IMementoConfig = {
expireTimeAsMilliSeconds: 60 * 60 * 1000,
store: 'local',
storeKey: 'MEMENTO_KEY'
paths: [
{
methods: ["GET", "POST"],
path: "users/*",
},
{
methods: ["GET"],
path: "posts",
},
],
};

/* MODULE-BASED ARCHITECTURE */
@NgModule({
declarations: [],
imports: [
...,
NgMementoModule.forRoot(config),
],
providers: [],
bootstrap: [],
})
export class AppModule {}

/* STANDALONE ARCHITECTURE */
export const appConfig: ApplicationConfig = {
providers: [
...,
importProvidersFrom(
NgMementoModule.forRoot(config),
),
],
};
```

### Types

#### IMementoConfig

| property | type | default | required | description |
| :------------------------- | :------------------------- | :------------ | :------- | :----------------------------------------------------- |
| `expireTimeAsMilliSeconds` | `number` | | ✓ | cached data stored time |
| `paths` | `IMethodPath` | | ✓ |
| `store` | `none`, `local`, `session` | `none` | x | none: cached data stored lives only until next refresh |
| `storeKey` | `string` | `MEMENTO_KEY` | x | key that stores data if chose local or session |

#### IMethodPath

| property | type | default | required | description |
| :-------- | :----------- | :------ | :------- | :--------------------------------------------------------------------------- |
| `methods` | `methodType` | | ✓ | methods to be cached |
| `path` | `string` | | ✓ | path to be cached **(if path ends with '/\*' all sub paths will be cached)** |

#### methodType

| property | type | default | required | description |
| :----------- | :------------------------------ | :------ | :------- | :------------------- |
| `methodType` | `"GET", "POST", "PUT", "PATCH"` | | ✓ | methods to be cached |

### Important

**You should use methodType carefully. You send same header, body, params and path when you use POST, PUT and PATCH method, ng-memento will prevent the request therefore the data will not affect.**