Using cache with server side paginated data

[irudji]

Hello

I have a question about possibility to cache server side paginated data. For example, if I have table with several pages. On each page is 20 items. I'll go to first page and first 20 items will load from API and save to Store. After that I will go to second page and next 20 items will load and save to store. Is there some possibility to use Elf cache to cache already loaded data on first page so the http request is not needed when going back to first page?

Thanks in advance for response

[NetanelBasal]

https://ngneat.github.io/elf/docs/features/pagination/

[irudji]

Thanks for super fast response. I will try it. And second question is when I will add new item to collection, how I will invalidate cache?

[NetanelBasal]

Use deletePage

[irudji]

I'm trying to implement caching according to tutorial

My server side paginated object which is returned from server looks like this

There is a problem that when I'm creating store and provide the withEntities props factory function in the createStore call, I get the error

Type 'TodoDTO' does not satisfy the constraint '{ id: PropertyKey; }'.   Property 'id' is missing in type 'TodoDTO' but required in type '{ id: PropertyKey; }'.

[NetanelBasal]

Please go over the docs before asking questions :)

https://ngneat.github.io/elf/docs/features/entities/entities#idkey

[irudji]

Ok I understand it that I can use different unique property in my entity as idKey. But what should I use in my case of pagination object where nothing is unique?

[basit74]

I am getting an error that skipWhilePageExists requires 2-3 arguments

Now the second argument should be the page, but I am not sure what should be the first argument.

loadMany(payload: {offset: number, limit: number, currentPage: number, total: number, lastPage: number}): Observable<Statistics[]> {
      return this.http
        .get<Statistics[]>(`${this.API_BASE_URL}/statistcis?offset=${payload.offset}&limit=${payload.limit}`).pipe(
          tap({next: (statistics): void => this.statisticsStore.setStatistics(statistics, payload)}),
          skipWhilePageExists(payload.currentPage),
        );
    }