feat(admin-ui): Set up ngrx as a cache for Apollo Client

admin-ui/package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint vendure-admin --fix",
     "e2e": "ng e2e"
   },
   "private": true,
@@ -23,8 +23,10 @@
     "@clr/angular": "^0.11.21",
     "@clr/icons": "^0.11.21",
     "@clr/ui": "^0.11.21",
+    "@ngrx/store": "^6.0.1",
     "@webcomponents/custom-elements": "1.0.0",
     "apollo-angular": "^1.1.1",
+    "apollo-angular-cache-ngrx": "^1.0.0-beta.0",
     "apollo-angular-link-http": "^1.1.0",
     "apollo-cache-inmemory": "^1.2.4",
     "apollo-client": "^2.3.4",

admin-ui/src/app/app.component.ts

@@ -3,30 +3,35 @@ import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
 
 @Component({
-  selector: 'vdr-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+    selector: 'vdr-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'Vendure';
-  products: any[] = [];
+    title = 'Vendure';
+    products: any[] = [];
 
-  constructor(apollo: Apollo) {
-    apollo.query<any>({
-      query: gql`
-        {
-          products(languageCode: en) {
-            id
-            languageCode
-            name
-            slug
-            description
-          }
-        }
-      `,
-    })
-    .subscribe(result => {
-      this.products = result.data.products;
-    });
-  }
+    constructor(apollo: Apollo) {
+        apollo.query<any>({
+            query: gql`
+                {
+                    products(languageCode: en) {
+                        id
+                        languageCode
+                        name
+                        slug
+                        description
+                        translations {
+                            id
+                            languageCode
+                            name
+                        }
+                    }
+                }
+            `,
+        })
+        .subscribe(result => {
+            this.products = result.data.products;
+        });
+    }
 }

admin-ui/src/app/app.module.ts

@@ -7,28 +7,17 @@ import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 
 import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-  ],
-  imports: [
-    BrowserModule,
-    ClarityModule,
-    HttpClientModule,
-    ApolloModule,
-    HttpLinkModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
+    declarations: [
+        AppComponent,
+    ],
+    imports: [
+        BrowserModule,
+        CoreModule,
+    ],
+    providers: [],
+    bootstrap: [AppComponent],
 })
-export class AppModule {
-
-  constructor(apollo: Apollo, httpLink: HttpLink) {
-    apollo.create({
-      link: httpLink.create({uri: 'http://localhost:3000/graphql'}),
-      cache: new InMemoryCache(),
-    });
-  }
-
-}
+export class AppModule {}

admin-ui/src/app/core/core.module.ts

@@ -0,0 +1,36 @@
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { Apollo, APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';
+import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
+import { SharedModule } from '../shared/shared.module';
+import { APOLLO_NGRX_CACHE, StateModule } from '../state/state.module';
+
+export function createApollo(httpLink: HttpLink, ngrxCache: InMemoryCache) {
+  return {
+    link: httpLink.create({uri: 'http://localhost:3000/graphql'}),
+    cache: ngrxCache,
+  };
+}
+
+@NgModule({
+    imports: [
+        SharedModule,
+        HttpClientModule,
+        ApolloModule,
+        HttpLinkModule,
+        StateModule,
+    ],
+    exports: [
+        SharedModule,
+    ],
+    providers: [
+        {
+            provide: APOLLO_OPTIONS,
+            useFactory: createApollo,
+            deps: [HttpLink, APOLLO_NGRX_CACHE],
+        },
+    ],
+})
+export class CoreModule {}

admin-ui/src/app/shared/shared.module.ts

@@ -0,0 +1,17 @@
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { ApolloModule } from 'apollo-angular';
+import { HttpLinkModule } from 'apollo-angular-link-http';
+
+@NgModule({
+    imports: [
+        ClarityModule,
+    ],
+    exports: [
+        ClarityModule,
+    ],
+})
+export class SharedModule {
+
+}

admin-ui/src/app/state/state.module.ts

@@ -0,0 +1,33 @@
+import { InjectionToken, NgModule } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { apolloReducer, NgrxCache, NgrxCacheModule } from 'apollo-angular-cache-ngrx';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
+export const APOLLO_NGRX_CACHE = new InjectionToken<InMemoryCache>('APOLLO_NGRX_CACHE');
+
+export function createApolloNgrxCache(ngrxCache: NgrxCache, store: Store<any>): InMemoryCache {
+    const cache = ngrxCache.create();
+    (window as any).getState = () => {
+        // tslint:disable-next-line
+        store.select(state => state).subscribe(state => console.log(state));
+    };
+    return cache;
+}
+
+@NgModule({
+    imports: [
+        NgrxCacheModule,
+        StoreModule.forRoot({
+            entities: apolloReducer,
+        }),
+        NgrxCacheModule.forRoot('entities'),
+    ],
+    providers: [
+        {
+            provide: APOLLO_NGRX_CACHE,
+            useFactory: createApolloNgrxCache,
+            deps: [NgrxCache, Store],
+        },
+    ],
+})
+export class StateModule {}

admin-ui/yarn.lock

@@ -189,6 +189,10 @@
   version "0.11.21"
   resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-0.11.21.tgz#768b7d5afedce0b29195306debce9378501f73ee"
 
+"@ngrx/store@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.0.1.tgz#02c806ce20c698b997e81f5671e0edc07d32cf86"
+
 "@ngtools/webpack@6.0.8":
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.0.8.tgz#a05bce526aee9da62bb230a95fba83fee99d0bca"
@@ -510,6 +514,13 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+apollo-angular-cache-ngrx@^1.0.0-beta.0:
+  version "1.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/apollo-angular-cache-ngrx/-/apollo-angular-cache-ngrx-1.0.0-beta.0.tgz#e09197a1dbb3be17adfee4cc283f9009020691ab"
+  dependencies:
+    apollo-cache "^1.1.0"
+    apollo-cache-inmemory "^1.1.5"
+
 apollo-angular-link-http-common@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/apollo-angular-link-http-common/-/apollo-angular-link-http-common-1.1.0.tgz#e91194d21a724b2dabafcf990cf5049df57b1b31"
@@ -524,7 +535,7 @@ apollo-angular@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/apollo-angular/-/apollo-angular-1.1.1.tgz#037fb798e2c925e8e270b9640fd6cbea961022df"
 
-apollo-cache-inmemory@^1.2.4:
+apollo-cache-inmemory@^1.1.5, apollo-cache-inmemory@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.2.4.tgz#452e731a6777756d744d493a3223cf04f8e50c9b"
   dependencies:
@@ -532,7 +543,7 @@ apollo-cache-inmemory@^1.2.4:
     apollo-utilities "^1.0.15"
     graphql-anywhere "^4.1.13"
 
-apollo-cache@^1.1.11:
+apollo-cache@^1.1.0, apollo-cache@^1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.1.11.tgz#998e31a4b278e2fbbbf36fef8fce39c08adc35ca"
   dependencies: