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).
- install Node.js
- install PostgreSQL
- optionally install a good IDE with TypeScript support, e.g. VS Code
- optionally install Yarn (rather than using NPM)
- 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(ornpm -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(ornpm 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
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, [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent