update to Angular 10

DavidBuck · DavidBuck · commit f897e697d178 · 2020-10-19T09:32:48.000+11:00
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,4 @@
 {
-  "semi": true,
   "singleQuote": true,
-  "bracketSpacing": true,
-  "tabWidth": 2,
-  "useTabs": false,
   "trailingComma": "none"
 }
diff --git a/README.md b/README.md
@@ -1,12 +1,18 @@
-# Angular 9 GraphQL Apollo Example
+# Angular 10 GraphQL Apollo Example
 
-This is a simple Angular 9 example that uses Apollo Angular to run queries and mutations on a mock GraphQL Backend.
+This is a simple Angular 10 example that uses Apollo Angular to run queries and mutations on a mock GraphQL Backend.
 
-Run `npm run start` to start the json-graphql-serve and the Angular client.
+Run `npm run start` to start the json-graphql-server and the Angular client.
 
 ## Tools
 
 - [json-graphql-server](https://github.com/marmelab/json-graphql-server)
 - [Apollo Angular](https://www.npmjs.com/package/apollo-angular)
 - [Tailwind](https://tailwindcss.com)
 - [ng-tailwindcss](https://github.com/tehpsalmist/ng-tailwindcss)
+
+## Versions
+
+- [Version 1.1](https://github.com/DavidBuck/angular-graphql-apollo-example/releases/tag/v1.1) - Angular version 10.1.6.
+
+- [Version 1.0](https://github.com/DavidBuck/angular-graphql-apollo-example/releases/tag/v1.0) - Angular version 9.1.1.
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-graphql-apollo-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Angular GraphQL Apollo example",
   "author": "David Buck",
   "repository": "github:davidbuck/angular-graphql-apollo-example",
@@ -17,50 +17,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.1",
-    "@angular/common": "~9.1.1",
-    "@angular/compiler": "~9.1.1",
-    "@angular/core": "~9.1.1",
-    "@angular/forms": "~9.1.1",
-    "@angular/platform-browser": "~9.1.1",
-    "@angular/platform-browser-dynamic": "~9.1.1",
-    "@angular/router": "~9.1.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.11",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
-    "rxjs": "~6.5.5",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "@angular/animations": "^10.1.6",
+    "@angular/common": "^10.1.6",
+    "@angular/compiler": "^10.1.6",
+    "@angular/core": "^10.1.6",
+    "@angular/forms": "^10.1.6",
+    "@angular/platform-browser": "^10.1.6",
+    "@angular/platform-browser-dynamic": "^10.1.6",
+    "@angular/router": "^10.1.6",
+    "apollo-angular": "^2.0.4",
+    "graphql": "^15.0.0",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2",
+    "@apollo/client": "^3.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.1",
-    "@angular/cli": "^9.1.1",
-    "@angular/compiler-cli": "~9.1.1",
-    "@angular/language-service": "~9.1.1",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "^0.1001.7",
+    "@angular/cli": "^10.1.7",
+    "@angular/compiler-cli": "^10.1.6",
+    "@angular/language-service": "^10.1.6",
+    "@types/jasmine": "^3.5.14",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "concurrently": "^5.1.0",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "@types/node": "^12.12.68",
+    "codelyzer": "^6.0.1",
+    "concurrently": "^5.3.0",
+    "jasmine-core": "^3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
     "json-graphql-server": "^2.1.3",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.3",
-    "prettier": "^1.19.1",
-    "protractor": "^5.4.3",
-    "tailwindcss": "^1.2.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "prettier": "^2.1.2",
+    "protractor": "~7.0.0",
+    "tailwindcss": "^1.9.4",
+    "ts-node": "^8.3.0",
+    "tslint": "~6.1.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
-    "typescript": "~3.8.3"
+    "typescript": "~4.0.3"
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -23,24 +23,24 @@ export class AppComponent implements OnInit {
 
   addPostGraphql() {
     this.dataService.addPostGraphql(this.newPost).subscribe(
-      res => console.log(res),
-      err => console.error(err)
+      (res) => console.log(res),
+      (err) => console.error(err)
     );
   }
 
   updatePostGraphql() {
     this.dataService
       .updatePostGraphql({ id: 4, title: 'Updated Post' })
       .subscribe(
-        res => console.log(res),
-        err => console.error(err)
+        (res) => console.log(res),
+        (err) => console.error(err)
       );
   }
 
   deletePostGraphql() {
     this.dataService.deletePostGraphql(1).subscribe(
-      res => console.log(res),
-      err => console.error(err)
+      (res) => console.log(res),
+      (err) => console.error(err)
     );
   }
 }
diff --git a/src/app/graphql-server.service.ts b/src/app/graphql-server.service.ts
@@ -1,7 +1,7 @@
+import { gql, Apollo } from 'apollo-angular';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import gql from 'graphql-tag';
-import { Apollo } from 'apollo-angular';
+
 import { Post } from './post';
 
 @Injectable({
@@ -49,9 +49,12 @@ export class GraphqlServerService {
       mutation: this.query,
       variables: post,
       update: (store, { data: { createPost } }) => {
-        const data: any = store.readQuery({ query: this.allPosts });
-        data.allPosts = [...data.allPosts, createPost];
-        store.writeQuery({ query: this.allPosts, data });
+        const existingPosts: any = store.readQuery({ query: this.allPosts });
+        const newPosts = [...existingPosts.allPosts, createPost];
+        store.writeQuery({
+          query: this.allPosts,
+          data: { allPosts: newPosts }
+        });
       }
     });
   }
@@ -84,10 +87,14 @@ export class GraphqlServerService {
     return this.apollo.mutate({
       mutation: this.query,
       variables: { id: deleteId },
-      update: store => {
-        const data: any = store.readQuery({ query: this.allPosts });
-        data.allPosts.splice(deleteId - 1, 1);
-        store.writeQuery({ query: this.allPosts, data });
+      update: (store) => {
+        const existingPosts: any = store.readQuery({ query: this.allPosts });
+        const updatedPosts = [...existingPosts.allPosts];
+        updatedPosts.splice(deleteId - 1, 1);
+        store.writeQuery({
+          query: this.allPosts,
+          data: { allPosts: updatedPosts }
+        });
       }
     });
   }
diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts
@@ -1,7 +1,7 @@
+import { APOLLO_OPTIONS } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
+import { InMemoryCache } from '@apollo/client/core';
 import { NgModule } from '@angular/core';
-import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
-import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
-import { InMemoryCache } from 'apollo-cache-inmemory';
 
 const uri = 'http://localhost:3000/graphql';
 
@@ -13,7 +13,6 @@ export function createApollo(httpLink: HttpLink) {
 }
 
 @NgModule({
-  exports: [ApolloModule, HttpLinkModule],
   providers: [
     {
       provide: APOLLO_OPTIONS,
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
@@ -18,7 +18,8 @@
       "es2018",
       "dom",
       "esnext.asynciterable"
-    ]
+    ],
+    "allowSyntheticDefaultImports": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
diff --git a/tslint.json b/tslint.json
@@ -1,21 +1,42 @@
 {
-  "extends": [
-    "tslint:recommended",
-    "tslint-plugin-prettier",
-    "tslint-config-prettier"
-  ],
+  "extends": "tslint:recommended",
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
     "prettier": true,
     "array-type": false,
+    "arrow-return-shorthand": true,
     "arrow-parens": false,
     "deprecation": {
       "severity": "warning"
     },
     "component-class-suffix": true,
+    "curly": true,
     "contextual-lifecycle": true,
     "directive-class-suffix": true,
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "eofline": true,
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
     "import-blacklist": [true, "rxjs/Rx"],
     "interface-name": false,
     "max-classes-per-file": false,
@@ -52,11 +73,64 @@
     "no-output-native": true,
     "no-output-on-prefix": true,
     "no-output-rename": true,
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
     "no-outputs-metadata-property": true,
     "template-banana-in-box": true,
     "template-no-negated-async": true,
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
     "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
+    "use-pipe-transform-interface": true,
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    }
   },
-  "rulesDirectory": ["codelyzer"]
+  "rulesDirectory": [
+    "codelyzer",
+    "tslint-plugin-prettier",
+    "tslint-config-prettier"
+  ]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,4 @@`
`1`	`1`	`{`
`2`		`- "semi": true,`
`3`	`2`	`"singleQuote": true,`
`4`		`- "bracketSpacing": true,`
`5`		`- "tabWidth": 2,`
`6`		`- "useTabs": false,`
`7`	`3`	`"trailingComma": "none"`
`8`	`4`	`}`