Upgrade Apollo

- Added @ApolloClient. - Upgraded Apollo-Client to V3. - Upgraded Apollo-Angular to V2. Signed-off-by: Dillon-Brown <dillon.brown@salesagility.com>
2025-08-29 07:50:08 +08:00 · 2020-12-22 09:31:48 +00:00 · 2020-12-22 09:31:48 +00:00 · 544adba1b3
commit 544adba1b3
parent d43b1ab2df
14 changed files with 161 additions and 207 deletions
--- a/core/app/src/app/app.module.ts
+++ b/core/app/src/app/app.module.ts
@ -2,10 +2,11 @@ import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';

-import {Apollo, ApolloModule} from 'apollo-angular';
-import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
-import {InMemoryCache} from 'apollo-cache-inmemory';
-import {onError} from 'apollo-link-error';
+import {Apollo} from 'apollo-angular';
+import {HttpLink} from 'apollo-angular/http';
+import {InMemoryCache} from '@apollo/client/core';
+import {onError} from '@apollo/link-error';
+import {FetchPolicy} from '@apollo/client/core/watchQueryOptions';

 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@ -30,16 +31,15 @@ import {ErrorInterceptor} from '@services/auth/error.interceptor';
 import {AppManagerModule} from '../app-manager/app-manager.module';

 import {environment} from '../environments/environment';
-import {FetchPolicy} from 'apollo-client/core/watchQueryOptions';
 import {RouteReuseStrategy} from '@angular/router';
 import {AppRouteReuseStrategy} from './app-router-reuse-strategy';
 import {ImageModule} from '@components/image/image.module';
-import {AuthService} from '@services/auth/auth.service';
-import {GraphQLError} from 'graphql';
 import {FullPageSpinnerModule} from '@components/full-page-spinner/full-page-spinner.module';
 import {BnNgIdleService} from 'bn-ng-idle';
 import {ColumnChooserComponent} from '@components/columnchooser/columnchooser.component';
 import {AppInit} from '@app/app-initializer';
+import {AuthService} from '@services/auth/auth.service';
+import {GraphQLError} from 'graphql';

 export const initializeApp = (appInitService: AppInit) => (): Promise<any> => appInitService.init();

@ -50,9 +50,6 @@ export const initializeApp = (appInitService: AppInit) => (): Promise<any> => ap
    imports: [
        BrowserModule,
        HttpClientModule,
-        HttpClientModule,
-        ApolloModule,
-        HttpLinkModule,
        AppManagerModule,
        AppRoutingModule,
        FooterUiModule,
@ -90,9 +87,6 @@ export const initializeApp = (appInitService: AppInit) => (): Promise<any> => ap
 export class AppModule {
    constructor(apollo: Apollo, httpLink: HttpLink, protected auth: AuthService) {

-        const uri = environment.graphqlApiUrl;
-        const cache = new InMemoryCache();
-
        const defaultOptions = {
            watchQuery: {
                fetchPolicy: 'no-cache' as FetchPolicy
@ -103,7 +97,7 @@ export class AppModule {
        };

        const http = httpLink.create({
-            uri,
+            uri: environment.graphqlApiUrl,
            withCredentials: true
        });

@ -117,11 +111,10 @@ export class AppModule {
            }
        });

-
        apollo.create({
-            link: logoutLink.concat(http),
            defaultOptions,
-            cache
+            link: logoutLink.concat(http),
+            cache: new InMemoryCache()
        });
    }
 }
--- a/core/app/src/services/api/graphql-api/api.collection.get.ts
+++ b/core/app/src/services/api/graphql-api/api.collection.get.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/src/services/api/graphql-api/api.entity.get.ts
+++ b/core/app/src/services/api/graphql-api/api.entity.get.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/src/services/api/graphql-api/api.record.create.ts
+++ b/core/app/src/services/api/graphql-api/api.record.create.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {FetchResult} from 'apollo-link';
+import {FetchResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/src/services/classic-view/api.classic-view.get.ts
+++ b/core/app/src/services/classic-view/api.classic-view.get.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/src/services/process/processes/async-action/async-action.spec.mock.ts
+++ b/core/app/src/services/process/processes/async-action/async-action.spec.mock.ts
@ -1,7 +1,7 @@
 import {Observable, of} from 'rxjs';
 import {shareReplay} from 'rxjs/operators';
 import {EntityMutationGQL} from '@services/api/graphql-api/api.record.create';
-import {FetchResult} from 'apollo-link';
+import {FetchResult} from '@apollo/client/core';
 import {ProcessService} from '@services/process/process.service';
 import {appStateStoreMock} from '@store/app-state/app-state.store.spec.mock';
 import {AsyncActionService} from '@services/process/processes/async-action/async-action';
--- a/core/app/src/services/process/processes/recover-password/recover-password.spec.mock.ts
+++ b/core/app/src/services/process/processes/recover-password/recover-password.spec.mock.ts
@ -1,7 +1,7 @@
 import {Observable, of} from 'rxjs';
 import {shareReplay} from 'rxjs/operators';
 import {EntityMutationGQL} from '@services/api/graphql-api/api.record.create';
-import {FetchResult} from 'apollo-link';
+import {FetchResult} from '@apollo/client/core';
 import {ProcessService} from '@services/process/process.service';
 import {appStateStoreMock} from '@store/app-state/app-state.store.spec.mock';
 import {RecoverPasswordService} from '@services/process/processes/recover-password/recover-password';
--- a/core/app/src/store/record-list/graphql/api.list.get.ts
+++ b/core/app/src/store/record-list/graphql/api.list.get.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';
 import {SearchCriteria} from '@app-common/views/list/search-criteria.model';
 import {map} from 'rxjs/operators';
 import {RecordList} from '@store/record-list/record-list.store';
--- a/core/app/src/store/record/graphql/api.record.get.ts
+++ b/core/app/src/store/record/graphql/api.record.get.ts
@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Apollo} from 'apollo-angular';
 import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/src/store/record/graphql/api.record.save.ts
+++ b/core/app/src/store/record/graphql/api.record.save.ts
@ -4,7 +4,7 @@ import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
 import {Record} from '@app-common/record/record.model';
 import {map} from 'rxjs/operators';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

 interface SaveInput {
    module: string;
@ -42,14 +42,14 @@ export class RecordSaveGQL {
        const mutationOptions = {
            mutation: gql`
                mutation saveRecord($input: saveRecordInput!) {
-                  saveRecord(input: $input) {
-                    record {
-                        attributes
-                        id
-                        _id
-                        module
+                    saveRecord(input: $input) {
+                        record {
+                            attributes
+                            id
+                            _id
+                            module
+                        }
                    }
-                  }
                }
            `,
            variables: {
--- a/core/app/src/store/statistics/graphql/api.statistics.get.ts
+++ b/core/app/src/store/statistics/graphql/api.statistics.get.ts
@ -4,7 +4,7 @@ import gql from 'graphql-tag';
 import {Observable} from 'rxjs';
 import {Statistic, StatisticsMap, StatisticsQueryMap} from '@app-common/statistics/statistics.model';
 import {map} from 'rxjs/operators';
-import {ApolloQueryResult} from 'apollo-client';
+import {ApolloQueryResult} from '@apollo/client/core';

@Injectable({
    providedIn: 'root'
--- a/core/app/tsconfig.json
+++ b/core/app/tsconfig.json
@ -9,6 +9,7 @@
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
--- a/package-lock.json
+++ b/package-lock.json
@ -967,6 +967,76 @@
      "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.12.tgz",
      "integrity": "sha512-+qCaXa9y0nsRhzjAYBqmGoQ2YkrdXgftZwuFDf6t4qEi30EXa0oS97KrlFq0M5GKdLIDGrbUm9PcdHSTOI+ZhA=="
    },
+    "@apollo/client": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.3.5.tgz",
+      "integrity": "sha512-0jKCwBMVJBfdDo3YdkALcw5F8t7rcKuR+cliqcFn+K3JxGFrYAtItdNbxq4CsGgaAQkzpwhVXYZZRSXTmtJqtA==",
+      "requires": {
+        "@graphql-typed-document-node/core": "^3.0.0",
+        "@types/zen-observable": "^0.8.0",
+        "@wry/context": "^0.5.2",
+        "@wry/equality": "^0.3.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graphql-tag": "^2.11.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.13.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^2.0.0",
+        "ts-invariant": "^0.6.0",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.14"
+      },
+      "dependencies": {
+        "@wry/context": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.5.2.tgz",
+          "integrity": "sha512-B/JLuRZ/vbEKHRUiGj6xiMojST1kHhu4WcreLfNN7q9DqQFrb97cWgf/kiYsPSUCAMVN0HzfFc8XjJdzgZzfjw==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "@wry/equality": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.3.0.tgz",
+          "integrity": "sha512-DRDAu/e3oWBj826OWNV/GCmSdHD248mASXImgNoLE/3SDvpgb+k6G/+TAmdpIB35ju264+kB22Rx92eXg52DnA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "optimism": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.13.1.tgz",
+          "integrity": "sha512-16RRVYZe8ODcUqpabpY7Gb91vCAbdhn8FHjlUb2Hqnjjow1j8Z1dlppds+yAsLbreNTVylLC+tNX6DuC2vt3Kw==",
+          "requires": {
+            "@wry/context": "^0.5.2"
+          }
+        },
+        "symbol-observable": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-2.0.3.tgz",
+          "integrity": "sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA=="
+        },
+        "ts-invariant": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.6.0.tgz",
+          "integrity": "sha512-caoafsfgb8QxdrKzFfjKt627m4i8KTtfAiji0DYJfWI4A/S9ORNNpzYuD9br64kyKFgxn9UNaLLbSupam84mCA==",
+          "requires": {
+            "@types/ungap__global-this": "^0.3.1",
+            "@ungap/global-this": "^0.4.2",
+            "tslib": "^1.9.3"
+          }
+        }
+      }
+    },
+    "@apollo/link-error": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@apollo/link-error/-/link-error-2.0.0-beta.3.tgz",
+      "integrity": "sha512-blNBBi9+4SEfb4Bhn8cYqGFhb0C7MjqLiRwNdUqwGefl1w+G8Ze8pCLHAyPxXLcslirtht9LY0i6ZOpCzSXHCg==",
+      "requires": {
+        "@apollo/client": "^3.0.0-beta.23",
+        "tslib": "^1.9.3"
+      }
+    },
    "@babel/code-frame": {
      "version": "7.5.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
@ -2926,6 +2996,11 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@graphql-typed-document-node/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg=="
+    },
    "@istanbuljs/schema": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@ -3181,9 +3256,9 @@
      }
    },
    "@types/jasmine": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.1.tgz",
-      "integrity": "sha512-eeSCVhBsgwHNS1FmaMu4zrLxfykCTWJMLFZv7lmyrZQjw7foUUXoPu4GukSN9v7JvUw7X+/aDH3kCaymirBSTg==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.2.tgz",
+      "integrity": "sha512-AzfesNFLvOs6Q1mHzIsVJXSeUnqVh4ZHG8ngygKJfbkcSLwzrBVm/LKa+mR8KrOfnWtUL47112gde1MC0IXqpQ==",
      "dev": true
    },
    "@types/jasminewd2": {
@ -3226,9 +3301,10 @@
      "dev": true
    },
    "@types/node": {
-      "version": "12.19.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.4.tgz",
-      "integrity": "sha512-o3oj1bETk8kBwzz1WlO6JWL/AfAA3Vm6J1B3C9CsdxHYp7XgPiH7OEXPUbZTndHlRaIElrANkQfe6ZmfJb3H2w=="
+      "version": "12.19.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.9.tgz",
+      "integrity": "sha512-yj0DOaQeUrk3nJ0bd3Y5PeDRJ6W0r+kilosLA+dzF3dola/o9hxhMSg2sFvVcA2UHS5JSOsZp4S0c1OEXc4m1Q==",
+      "dev": true
    },
    "@types/object-hash": {
      "version": "1.3.4",
@ -3253,6 +3329,11 @@
      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
      "dev": true
    },
+    "@types/ungap__global-this": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@types/ungap__global-this/-/ungap__global-this-0.3.1.tgz",
+      "integrity": "sha512-+/DsiV4CxXl6ZWefwHZDXSe1Slitz21tom38qPCaG0DYCS1NnDPIQDTKcmQ/tvK/edJUKkmuIDBJbmKDiB0r/g=="
+    },
    "@types/webpack-sources": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz",
@ -3411,6 +3492,11 @@
        }
      }
    },
+    "@ungap/global-this": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@ungap/global-this/-/global-this-0.4.2.tgz",
+      "integrity": "sha512-uFg7Kz+E12RBlgBLMlWVjmn2OIeE2J1Lzij0RseNcCVsrJX+LEB4fQ9MnoPXkXJmO5cHtTEzI5ATtb3IJfQ9tQ=="
+    },
    "@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -3587,23 +3673,6 @@
        "@xtuc/long": "4.2.2"
      }
    },
-    "@wry/context": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz",
-      "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==",
-      "requires": {
-        "@types/node": ">=6",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@wry/equality": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
-      "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -3776,14 +3845,20 @@
      }
    },
    "apollo-angular": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/apollo-angular/-/apollo-angular-1.10.0.tgz",
-      "integrity": "sha512-VPSNk8Li5KRDhZ3GSJPEYg1r57KySND2m1XWgkLNYmQExzNDs/Su9EeWThwOqjZ7x9JbGjpvWiQeUQaCs96PjA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/apollo-angular/-/apollo-angular-2.1.0.tgz",
+      "integrity": "sha512-/Xy6Ki4MrqWoBWf3aJkSQbd1tYm7F9k5KZ+ZsAYx78V+E4E+a8rAe4VfVQkY3kkbF+7mRTzUqszNg/rYyn2NmA==",
      "requires": {
+        "extract-files": "^9.0.0",
        "semver": "^7.0.0",
        "tslib": "^2.0.0"
      },
      "dependencies": {
+        "extract-files": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-9.0.0.tgz",
+          "integrity": "sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ=="
+        },
        "lru-cache": {
          "version": "6.0.0",
          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -3812,116 +3887,6 @@
        }
      }
    },
-    "apollo-angular-link-http": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/apollo-angular-link-http/-/apollo-angular-link-http-1.11.0.tgz",
-      "integrity": "sha512-/mFytwvHhmWOX3emi8ljpuas8HpwSVOfbKniOeDFSE44g9HsPKkq2bGTucUTUo0Un3cCBEVKei2jTIDVsZPqFA==",
-      "requires": {
-        "apollo-angular-link-http-common": "~1.10.0",
-        "extract-files": "6.0.0",
-        "tslib": "^2.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        }
-      }
-    },
-    "apollo-angular-link-http-common": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/apollo-angular-link-http-common/-/apollo-angular-link-http-common-1.10.0.tgz",
-      "integrity": "sha512-Oue8b/naWZvG/oQ+3ZAqaBVreBIwqy16yOk5CpoE7+Gjhett9KGVu/OZcpH89/ifwXyWzHpKnCUnB1fxgbnR7Q==",
-      "requires": {
-        "tslib": "^2.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        }
-      }
-    },
-    "apollo-cache": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz",
-      "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==",
-      "requires": {
-        "apollo-utilities": "^1.3.4",
-        "tslib": "^1.10.0"
-      }
-    },
-    "apollo-cache-inmemory": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz",
-      "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==",
-      "requires": {
-        "apollo-cache": "^1.3.5",
-        "apollo-utilities": "^1.3.4",
-        "optimism": "^0.10.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0"
-      }
-    },
-    "apollo-client": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz",
-      "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==",
-      "requires": {
-        "@types/zen-observable": "^0.8.0",
-        "apollo-cache": "1.3.5",
-        "apollo-link": "^1.0.0",
-        "apollo-utilities": "1.3.4",
-        "symbol-observable": "^1.0.2",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0",
-        "zen-observable": "^0.8.0"
-      }
-    },
-    "apollo-link": {
-      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz",
-      "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==",
-      "requires": {
-        "apollo-utilities": "^1.3.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.9.3",
-        "zen-observable-ts": "^0.8.21"
-      }
-    },
-    "apollo-link-error": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.13.tgz",
-      "integrity": "sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "apollo-link-http-common": "^0.2.16",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-link-http-common": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz",
-      "integrity": "sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-utilities": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
-      "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==",
-      "requires": {
-        "@wry/equality": "^0.1.2",
-        "fast-json-stable-stringify": "^2.0.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0"
-      }
-    },
    "append-transform": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-1.0.0.tgz",
@ -5412,9 +5377,9 @@
      }
    },
    "core-js": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.7.0.tgz",
-      "integrity": "sha512-NwS7fI5M5B85EwpWuIwJN4i/fbisQUwLwiSNUWeXlkAZ0sbBjLEvLvFLf1uzAUV66PcEPt4xCGCmOZSxVf3xzA=="
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz",
+      "integrity": "sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg=="
    },
    "core-js-compat": {
      "version": "3.6.5",
@ -7629,11 +7594,6 @@
        }
      }
    },
-    "extract-files": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-6.0.0.tgz",
-      "integrity": "sha512-v9UVTPkERZR1NjEOIPvmbzLFdh8YZFEGjRdSJraop6HJe9PQ8HU9iv6eRMuF06CXXXO/R5OBmnWMixZHuZ8CsA=="
-    },
    "extsprintf": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@ -8290,6 +8250,14 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
    "hosted-git-info": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@ -10027,7 +9995,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "requires": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
@ -10939,8 +10906,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "object-component": {
      "version": "0.0.3",
@ -11150,14 +11116,6 @@
        }
      }
    },
-    "optimism": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz",
-      "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==",
-      "requires": {
-        "@wry/context": "^0.4.0"
-      }
-    },
    "optionator": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@ -12494,6 +12452,16 @@
        }
      }
    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
    "protoduck": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
@ -13052,6 +13020,11 @@
        }
      }
    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -14807,7 +14780,8 @@
    "symbol-observable": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "dev": true
    },
    "table": {
      "version": "5.4.6",
@ -15262,14 +15236,6 @@
      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
      "dev": true
    },
-    "ts-invariant": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
-      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
    "ts-node": {
      "version": "8.10.2",
      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
@ -16935,15 +16901,6 @@
      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
    },
-    "zen-observable-ts": {
-      "version": "0.8.21",
-      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz",
-      "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==",
-      "requires": {
-        "tslib": "^1.9.3",
-        "zen-observable": "^0.8.0"
-      }
-    },
    "zone.js": {
      "version": "0.10.3",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
--- a/package.json
+++ b/package.json
@ -28,11 +28,14 @@
    "@angular/platform-browser": "^9.1.12",
    "@angular/platform-browser-dynamic": "^9.1.12",
    "@angular/router": "^9.1.12",
+    "@apollo/client": "^3.3.4",
+    "@apollo/link-error": "^2.0.0-beta.3",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@swimlane/ngx-charts": "^14.0.0",
    "@types/object-hash": "^1.3.4",
    "ajv": "~6.9.1",
    "angular-svg-icon": "^8.0.0",
+    "apollo-angular": "^2.1.0",
    "bn-ng-idle": "^1.0.1",
    "bootstrap-css-only": "^4.4.1",
    "core-js": "^3.8.1",