Tour of Heroes with GraphQL

A copy of the final code for the Angular Tour of Heroes Tutorial (Part 6), but with minimal changes to support data storage on a real server-based relational database (and accessible via a GraphQL API).

As originally, the front-end is implemented using Angular and TypeScript, but this time with support from Apollo Client for communicating with the server using GraphQL, and (the extraordinarily powerful, but still in Alpha) PostGraphile for providing a GraphQL API on the server. A suitable database definition (and sample data) is provided in a SQL script (toh.pgsql).

Prerequisites

• install Node.js
• install PostgreSQL
• optionally install a good IDE with TypeScript support, e.g. VS Code
• optionally install Yarn (rather than using NPM)

Example installation

• clone the repository git clone https://github.com/tjme/angular-io-example-graphql.git toh-graphql
• change to your project directory cd toh-graphql
• create/configure a PostgreSQL "toh" database sudo -u postgres psql -d template1, then enter the following SQL commands:

CREATE USER test WITH PASSWORD 'testpass';
\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 (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
• Tour of Heroes should open automatically in your browser, and you should be able to list, add, update and delete heroes that are then stored (persistently) in the database
• you can restore the database, with its initial sample data, by re-running the toh.pgsql script

Issues

Currently, the Apollo-Angular can only return immutable Observables (see apollo-angular/#306), so a small code change was necessary in hero-detail-component.ts.

Any feedback would be gratefully recieved!

Thanks, tim@merrison.co.uk