Add Record GraphQL Api Service

- Add Apollo GraphQL client - Add Record Query service - Disable Apollo cache
2025-08-29 01:10:42 +08:00 · 2020-02-04 00:29:09 +00:00 · 2020-02-04 00:29:09 +00:00 · 6cc736f623
commit 6cc736f623
parent d8d92f42ea
6 changed files with 279 additions and 5 deletions
--- a/core/app/src/app/app.module.ts
+++ b/core/app/src/app/app.module.ts
@ -2,6 +2,10 @@ import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';

+import {Apollo, ApolloModule} from 'apollo-angular';
+import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';

@ -19,6 +23,11 @@ import {
  AppManagerModule
 } from '../app-manager/app-manager.module';

+import {environment} from '../environments/environment';
+import { FetchPolicy } from 'apollo-client/core/watchQueryOptions';
+
+
+
@NgModule({
  declarations: [
    AppComponent
@ -26,6 +35,9 @@ import {
  imports: [
    BrowserModule,
    HttpClientModule,
+    HttpClientModule,
+    ApolloModule,
+    HttpLinkModule,
    AppManagerModule,
    AppRoutingModule,
    FooterUiModule,
@ -41,7 +53,25 @@ import {
  entryComponents: []
 })
 export class AppModule {
-  constructor() {
+  constructor(apollo: Apollo,
+              httpLink: HttpLink) {

+    const uri = environment.graphqlApiUrl;
+    const cache = new InMemoryCache();
+
+    const defaultOptions = {
+      watchQuery: {
+        fetchPolicy: 'no-cache' as FetchPolicy
+      },
+      query: {
+        fetchPolicy: 'no-cache' as FetchPolicy
+      },
+    };
+
+    apollo.create({
+      link: httpLink.create({uri}),
+      defaultOptions,
+      cache
+    });
  }
 }
--- a/core/app/src/environments/environment.ts
+++ b/core/app/src/environments/environment.ts
@ -5,5 +5,6 @@

 export const environment = {
  production: false,
-  apiUrl: './api'
+  apiUrl: './api',
+  graphqlApiUrl: './api/graphql'
 };
--- a/core/app/src/services/api/graphql-api/api.record.get.ts
+++ b/core/app/src/services/api/graphql-api/api.record.get.ts
@ -0,0 +1,69 @@
+import {Injectable} from '@angular/core';
+import {Apollo, QueryRef} from 'apollo-angular';
+import gql from 'graphql-tag';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class RecordGQL {
+
+    constructor(private apollo: Apollo) {
+    }
+
+    /**
+     * Fetch data either from backend or cache
+     * @param module
+     * @param id
+     * @param metadata
+     */
+    public fetch(module: string, id: string, metadata: { fields: string[] }): QueryRef<any> {
+        const fields = metadata.fields;
+        const iriId = this.formatId(module, id);
+
+        let queryOptions = {
+            query: gql`
+              query ${module}($id: ID!) {
+                ${module}(id: $id) {
+                  ${fields.join('\n')}
+                }
+              }
+            `,
+            variables: {
+                id: iriId,
+            },
+        };
+
+        return this.apollo.watchQuery(queryOptions);
+    }
+
+    /**
+     * Get in memory cache data
+     * @param module
+     * @param id
+     * @param metadata
+     */
+    public get(module: string, id: string, metadata: { fields: string[] }): any {
+        const fields = metadata.fields;
+        const iriId = this.formatId(module, id);
+
+        let queryOptions = {
+            id: iriId,
+            fragment: gql`
+              fragment my${module} on ${module} {
+                 ${fields.join('\n')}
+              }
+            `
+        };
+
+        return this.apollo.getClient().readFragment(queryOptions);
+    }
+
+    /**
+     * Format id
+     * @param module
+     * @param id
+     */
+    protected formatId(module: string, id: string) {
+        return `/api/${module}s/${id}`;
+    }
+}
--- a/core/app/tsconfig.json
+++ b/core/app/tsconfig.json
@ -22,7 +22,8 @@
    },
    "lib": [
      "es2018",
-      "dom"
+      "dom",
+      "esnext.asynciterable"
    ]
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -3616,6 +3616,11 @@
        }
      }
    },
+    "@types/zen-observable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz",
+      "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg=="
+    },
    "@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -3792,6 +3797,23 @@
        "@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.9",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.9.tgz",
+      "integrity": "sha512-mB6ceGjpMGz1ZTza8HYnrPGos2mC6So4NhS1PtZ8s4Qt0K7fBiIGhpSxUbQmhwcSWE3no+bYxmI2OL6KuXYmoQ==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -3939,6 +3961,98 @@
        "picomatch": "^2.0.4"
      }
    },
+    "apollo-angular": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/apollo-angular/-/apollo-angular-1.8.0.tgz",
+      "integrity": "sha512-DgVZiF3zoRzMB3ah5nhmlL06MOhs45bWX+C8ydw7ZkVOB9Dy8QYUxDgkthyO101C5cQN0Q8lZyTQHyd7QEDAzg==",
+      "requires": {
+        "semver": "^6.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "apollo-angular-link-http": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/apollo-angular-link-http/-/apollo-angular-link-http-1.9.0.tgz",
+      "integrity": "sha512-wA6cLgZyA59RIZ28WKsty/4Gq+5DCxdfFruQmTBoMeol+R70R9fP99/A/HEV+fWPy4hWt9V2YeECx8HrSosd+g==",
+      "requires": {
+        "apollo-angular-link-http-common": "~1.8.0",
+        "extract-files": "5.0.1",
+        "tslib": "^1.9.0"
+      }
+    },
+    "apollo-angular-link-http-common": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/apollo-angular-link-http-common/-/apollo-angular-link-http-common-1.8.0.tgz",
+      "integrity": "sha512-Dx/OXIOT8RBIIxr9cUSbes1Qnolqgy678o5qT/oDE3/pHcBLiJhTph57Nqhr1/zRYU6fnhKJ6E50wFX7/5LI5g==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "apollo-cache": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.4.tgz",
+      "integrity": "sha512-7X5aGbqaOWYG+SSkCzJNHTz2ZKDcyRwtmvW4mGVLRqdQs+HxfXS4dUS2CcwrAj449se6tZ6NLUMnjko4KMt3KA==",
+      "requires": {
+        "apollo-utilities": "^1.3.3",
+        "tslib": "^1.10.0"
+      }
+    },
+    "apollo-cache-inmemory": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.5.tgz",
+      "integrity": "sha512-koB76JUDJaycfejHmrXBbWIN9pRKM0Z9CJGQcBzIOtmte1JhEBSuzsOUu7NQgiXKYI4iGoMREcnaWffsosZynA==",
+      "requires": {
+        "apollo-cache": "^1.3.4",
+        "apollo-utilities": "^1.3.3",
+        "optimism": "^0.10.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "apollo-client": {
+      "version": "2.6.8",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.8.tgz",
+      "integrity": "sha512-0zvJtAcONiozpa5z5zgou83iEKkBaXhhSSXJebFHRXs100SecDojyUWKjwTtBPn9HbM6o5xrvC5mo9VQ5fgAjw==",
+      "requires": {
+        "@types/zen-observable": "^0.8.0",
+        "apollo-cache": "1.3.4",
+        "apollo-link": "^1.0.0",
+        "apollo-utilities": "1.3.3",
+        "symbol-observable": "^1.0.2",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.0"
+      }
+    },
+    "apollo-link": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.13.tgz",
+      "integrity": "sha512-+iBMcYeevMm1JpYgwDEIDt/y0BB7VWyvlm/7x+TIPNLHCTCMgcEgDuW5kH86iQZWo0I7mNwQiTOz+/3ShPFmBw==",
+      "requires": {
+        "apollo-utilities": "^1.3.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.9.3",
+        "zen-observable-ts": "^0.8.20"
+      }
+    },
+    "apollo-utilities": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.3.tgz",
+      "integrity": "sha512-F14aX2R/fKNYMvhuP2t9GD9fggID7zp5I96MF5QeKYWDWTrkRdHRp4+SVfXUVN+cXOaB/IebfvRtzPf25CM0zw==",
+      "requires": {
+        "@wry/equality": "^0.1.2",
+        "fast-json-stable-stringify": "^2.0.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      }
+    },
    "app-root-path": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
@ -6421,6 +6535,11 @@
        }
      }
    },
+    "extract-files": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-5.0.1.tgz",
+      "integrity": "sha512-qRW6y9eKF0VbCyOoOEtFhzJ3uykAw8GKwQVXyAIqwocyEWW4m+v+evec34RwtUkkxxHh7NKBLJ6AnXM8W4dH5w=="
+    },
    "extsprintf": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@ -6848,6 +6967,19 @@
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
    },
+    "graphql": {
+      "version": "14.6.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.6.0.tgz",
+      "integrity": "sha512-VKzfvHEKybTKjQVpTFrA5yUq2S9ihcZvfJAtsDBBCuV6wauPu1xl/f9ehgVf0FcEJJs4vz6ysb/ZMkGigQZseg==",
+      "requires": {
+        "iterall": "^1.2.2"
+      }
+    },
+    "graphql-tag": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.2.tgz",
+      "integrity": "sha512-7rUuJkVGyedBiVJ/hPaxndDnzxANUZ+QhTu0KUzgTGtP3ibY/hSUl9em21aVh5BNMJsmMc4nVuOTBoiAUJ2xBQ=="
+    },
    "handle-thing": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@ -7816,6 +7948,11 @@
        "handlebars": "^4.1.2"
      }
    },
+    "iterall": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
+      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+    },
    "jasmine": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz",
@ -9328,6 +9465,14 @@
        "is-wsl": "^1.1.0"
      }
    },
+    "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"
+      }
+    },
    "optimist": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
@ -11775,8 +11920,7 @@
    "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==",
-      "dev": true
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
    },
    "tapable": {
      "version": "1.1.3",
@ -12000,6 +12144,14 @@
      "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.5.4",
      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.5.4.tgz",
@ -14369,6 +14521,20 @@
      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
      "dev": true
    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "0.8.20",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz",
+      "integrity": "sha512-2rkjiPALhOtRaDX6pWyNqK1fnP5KkJJybYebopNSn6wDG1lxBoFs2+nwwXKoA6glHIrtwrfBBy6da0stkKtTAA==",
+      "requires": {
+        "tslib": "^1.9.3",
+        "zen-observable": "^0.8.0"
+      }
+    },
    "zone.js": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.9.1.tgz",
--- a/package.json
+++ b/package.json
@ -24,10 +24,17 @@
    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
    "@types/object-hash": "^1.3.0",
    "ajv": "~6.9.1",
+    "apollo-angular": "^1.8.0",
+    "apollo-angular-link-http": "^1.9.0",
+    "apollo-cache-inmemory": "^1.6.5",
+    "apollo-client": "^2.6.8",
+    "apollo-link": "^1.2.13",
    "bootstrap-css-only": "^4.3.1",
    "chart.js": "^2.8.0",
    "chartjs-plugin-annotation": "^0.5.7",
    "core-js": "^3.6.0",
+    "graphql": "^14.6.0",
+    "graphql-tag": "^2.10.1",
    "ng2-charts": "^2.2.3",
    "nyc": "~14.1.1",
    "object-hash": "^2.0.1",