Further refactor GraphQLService and correct permissions in readme

Author: tjme

README.md

@@ -19,18 +19,18 @@ As originally, the front-end is implemented using [Angular](https://angular.io/t
 
 ```sql
 CREATE USER test WITH PASSWORD 'testpass';
-CREATE DATABASE toh TEMPLATE template0;
-GRANT ALL ON DATABASE toh TO test;
 \c toh
 \i toh.pgsql
+GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO test;
+GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO test;
 \q
 ```
 
 - install PostGraphile globally `yarn global add postgraphile` (or `npm -g i postgraphile`)
 - optionally generate JSON and GraphQL schema files `postgraphile -c postgres://test:testpass@/toh -s public --export-schema-json toh.json --export-schema-graphql toh.gql`
 - run the GraphQL server (in the background) with `postgraphile -c postgres://test:testpass@/toh -s public -o &`
 - optionally you can click on the link to GraphiQL generated by the above, and explore the server by entering queries such as: `{allHeroes{nodes{nodeId,id,name}}}`
-- install angular CLI globally `yarn global add @angular/cli`
+- install angular CLI globally (you may need elevated privileges, e.g. prefix with sudo) `yarn global add @angular/cli`
 - if using yarn, configure `ng set --global packageManager=yarn`
 - install the front-end dependencies with `yarn` (or `npm i`)
 - run the Angular server `ng serve --open`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-io-example-graphql",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "description": "Example Tour of Heroes project from an angular.io guide, but using a real relational database server (PostgreSQL), via GraphQL (generated using PostGraphile).",
   "scripts": {
@@ -40,7 +40,7 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.5",
+    "@angular/cli": "^1.7.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "^2.0.3",
     "@types/node": "^6.0.45",

src/app/graphql.service.ts

@@ -11,16 +11,6 @@ import {MessageService} from './message.service';
 
 export const GraphQLUrl = 'http://localhost:5000/graphql';  // URL to web api
 
-export interface GQLOptions {
-  readAll: any;
-  readById: any;
-  readWithTerm: any;
-  create: any;
-  update: any;
-  delete: any;
-  deleteById: any;
-}
-
 @Injectable()
 export class GraphQLService {
 
@@ -35,69 +25,21 @@ export class GraphQLService {
     });
   }
 
-  /** Read all records from the server */
-  readAll<T>(options: GQLOptions): Observable<T> {
-    return this.apollo.subscribe({query: options.readAll}).pipe(
-        map(({data}) => data),
-        tap(_ => this.log(`read all`)),
-        catchError(this.handleError<T>('readAll'))
-      );
-  }
-
-  /** Read a record by id. Will 404 if id not found */
-  readById<T>(options: GQLOptions, id: any): Observable<T> {
-    return this.apollo.query<T>({query: options.readById, variables: {id: id}}).pipe(
-      map(({data}) => data), // returns a {0|1} element array
-      tap(_ => this.log(`read record with id=${id}`)),
-        catchError(this.handleError<T>(`readById id=${id}`))
-      );
-  }
-
-  /* Read all records whose name contains the search term */
-  readWithTerm<T>(options: GQLOptions, term: string): Observable<T> {
-    if (!term.trim()) {return of();} // if not search term, return empty array of records.
-    return this.apollo.watchQuery<T>({query: options.readWithTerm, variables: {term: term}}).valueChanges.pipe(
-      map(({data}) => data),
-      tap(_ => this.log(`read records matching "${term}"`)),
-      catchError(this.handleError<T>('readWithTerm'))
-    );
-  }
-
-  //////// Save methods //////////
-
-  /** Create a new record on the server */
-  create<T>(options: GQLOptions, record: any): Observable<T> {
-    return this.apollo.mutate<T>({mutation: options.create, variables: record}).pipe(
-      map(({data}) => data), // returns a {0|1} element array
-      tap(_ => this.log(`created record with ${JSON.stringify(record)}`)),
-      catchError(this.handleError<T>('create'))
-    );
-  }
-
-  /** Update the record on the server */
-  update<T>(options: GQLOptions, record: any): Observable<T> {
-    return this.apollo.mutate<T>({mutation: options.update, variables: record}).pipe(
-      map(({data}) => data),
-      tap(_ => this.log(`updated record with ${JSON.stringify(record)}`)),
-      catchError(this.handleError<T>('update'))
-    );
-  }
-
-  /** Delete the record from the server */
-  delete<T>(options: GQLOptions, record: any): Observable<T> {
-    return this.apollo.mutate<T>({mutation: options.delete, variables: record}).pipe(
+  /* Query (read) record(s), matching variables where necessary */
+  query<T>(query: any, variables: any = {}, description: string = 'read'): Observable<T> {
+    return this.apollo.subscribe({query: query, variables: variables}).pipe(
       map(({data}) => data),
-      tap(_ => this.log(`deleted record with ${JSON.stringify(record)}`)),
-      catchError(this.handleError<T>('delete'))
+      tap(_ => this.log(`${description} record(s) with ${JSON.stringify(variables)}`)),
+      catchError(this.handleError<T>(`Query=${JSON.stringify(query)} Variables=${JSON.stringify(variables)} Description=${description}`))
     );
   }
 
-  /** Delete the record from the server */
-  deleteById<T>(options: GQLOptions, id: any): Observable<T> {
-    return this.apollo.mutate<T>({mutation: options.deleteById, variables: {id: id}}).pipe(
+  /** Mutate (create, update or delete) a record on the server */
+  mutate<T>(mutation: any, variables: any = {}, description: string = 'mutate'): Observable<T> {
+    return this.apollo.mutate<T>({mutation: mutation, variables: variables}).pipe(
       map(({data}) => data),
-      tap(_ => this.log(`deleted record with id=${id}`)),
-      catchError(this.handleError<T>('deleteById'))
+      tap(_ => this.log(`${description} record(s) with ${JSON.stringify(variables)}`)),
+      catchError(this.handleError<T>(`Mutate=${JSON.stringify(mutation)} Variables=${JSON.stringify(variables)} Description=${description}`))
     );
   }
 
@@ -122,7 +64,7 @@ export class GraphQLService {
   }
 
   /** Log a GraphQLService message with the MessageService */
-  private log(message: string) {
-    this.messageService.add('GraphQLService: ' + message);
+  log<T>(item: T, prefix: string = ''): T {
+    return this.messageService.log(item, 'GraphQLService: ' + prefix);
   }
 }

src/app/hero.service.ts

@@ -1,82 +1,66 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
-import { InMemoryCache } from 'apollo-cache-inmemory';
 import gql from 'graphql-tag';
-
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
-import { catchError, map, tap } from 'rxjs/operators';
-
+import { map, tap } from 'rxjs/operators';
 import { Hero } from './hero';
-import { MessageService } from './message.service';
-import { GraphQLService, GQLOptions } from './graphql.service';
-
-const options: GQLOptions = {
-  readAll: gql`query readAll{allHeroes{nodes{id,name}}}`,
-  readById: gql`query readById($id:Int!){heroById(id:$id){id,name}}`,
-  readWithTerm: gql`query readWithTerm($term:String!){allHeroes(term:$term){nodes{id,name}}}`,
-  create: gql`mutation create($name:String!)
-    {createHero(input:{clientMutationId:"toh-createHero",hero:{name:$name}})
-      {clientMutationId,hero{id,name}}}`,
-  update: gql`mutation update($id:Int!,$name:String!)
-    {updateHeroById(input:{clientMutationId:"toh-updateHero",id:$id,heroPatch:{name:$name}})
-      {clientMutationId,hero{id,name}}}`,
-  delete: gql`mutation delete($id:Int!)
-    {deleteHeroById(input:{clientMutationId:"toh-deleteHero",id:$id})
-      {clientMutationId,hero{id,name}}}`,
-  deleteById: gql`mutation deleteById($id:Int!)
-    {deleteHeroById(input:{clientMutationId:"toh-deleteHeroById",id:$id})
-      {clientMutationId,hero{id,name}}}`
-};
+import { GraphQLService } from './graphql.service';
 
 @Injectable()
 export class HeroService {
 
   constructor(
-    private graphQLService: GraphQLService
+    private gqlService: GraphQLService
   ) { }
 
   /** Get all heroes from the server */
   getHeroes (): Observable<Hero[]> {
-    return this.graphQLService.readAll<{allHeroes:{nodes:Hero[]}}>(options).pipe(
-      map((data) => data.allHeroes.nodes))
-  }
+    return this.gqlService.query<{allHeroes:{nodes:Hero[]}}>(
+      gql`query readAllHeroes{allHeroes{nodes{id,name}}}`
+    ).pipe(map((data) => data.allHeroes.nodes))}
 
   /** Get a hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
-    return this.graphQLService.readById<{heroById:Hero}>(options, id).pipe(
-      map((data) => data.heroById))
-  }
+    return this.gqlService.query<{heroById:Hero}>(
+      gql`query readHeroById($id:Int!){heroById(id:$id){id,name}}`,
+      {'id': id},
+      'readHeroById'
+    ).pipe(map((data) => data.heroById))}
 
   /* Get all heroes whose name contains search term */
   searchHeroes(term: string): Observable<Hero[]> {
     if (!term.trim()) {return of([]);} // if not search term, return empty hero array.
-    return this.graphQLService.readWithTerm<{allHeroes:{nodes:Hero[]}}>(options, term).pipe(
-      map((data) => data.allHeroes.nodes))
-  }
+    return this.gqlService.query<{herowithterm:{nodes:Hero[]}}>(
+      gql`query readHeroesWithTerm($term:String!){herowithterm(term:$term){nodes{id,name}}}`,
+      {'term': term},
+      'readHerosWithTerm'
+    ).pipe(map((data) => data.herowithterm.nodes))}
 
   //////// Save methods //////////
 
   /** Add a new hero to the server */
   addHero (hero: Hero): Observable<Hero> {
-    return this.graphQLService.create<{createHero:{hero:Hero}}>(options, hero).pipe(
-      map((data) => data.createHero.hero))
-  }
+    return this.gqlService.mutate<{createHero:{hero:Hero}}>(
+      gql`mutation create($name:String!)
+        {createHero(input:{hero:{name:$name}})
+          {hero{id,name}}}`,
+      hero, 'create').pipe(map((data) => data.createHero.hero))}
 
   /** Delete the hero from the server */
   deleteHero (hero: Hero | number): Observable<Hero> {
     const id = typeof hero === 'number' ? hero : hero.id;
-    return this.graphQLService.delete<{deleteHeroById:{hero:Hero}}>(options, {"id": id}).pipe(
-      map((data) => data.deleteHeroById.hero))
-  }
-
+    return this.gqlService.mutate<{deleteHeroById:{hero:Hero}}>(
+      gql`mutation delete($id:Int!)
+        {deleteHeroById(input:{id:$id})
+          {hero{id,name}}}`,
+      {'id': id}, 'delete').pipe(map((data) => data.deleteHeroById.hero))}
 
   /** Update the hero on the server */
   updateHero (hero: Hero): Observable<Hero> {
-    return this.graphQLService.update<{updateHeroById:{hero:Hero}}>(options, hero).pipe(
-      map((data) => data.updateHeroById.hero))
-  }
+    return this.gqlService.mutate<{updateHeroById:{hero:Hero}}>(
+      gql`mutation update($id:Int!,$name:String!)
+        {updateHeroById(input:{id:$id,heroPatch:{name:$name}})
+          {hero{id,name}}}`,
+      hero, 'update').pipe(map((data) => data.updateHeroById.hero))}
 
 }

src/app/message.service.ts

@@ -8,6 +8,11 @@ export class MessageService {
     this.messages.push(message);
   }
 
+  log<T>(item: T, prefix: string = 'Log: '): T {
+    this.add(`${prefix}${typeof(item)  === 'string' ? item : JSON.stringify(item)}`);
+    return item;
+  }
+
   clear() {
     this.messages = [];
   }