edit/fix broken links

Author: dkkloimwieder

.env

@@ -3,4 +3,4 @@ POSTGRES_PASSWORD=SAMPLE_PASSWORD
 POSTGRES_DB=todo_db
 POSTGRES_PORT=5432
 POSTGRES_HOST=127.0.0.1
-PORT=3333
+PORT=4000

.env_example

@@ -0,0 +1,6 @@
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=SAMPLE_PASSWORD
+POSTGRES_DB=todo_db
+POSTGRES_PORT=5432
+POSTGRES_HOST=127.0.0.1
+PORT=4000

.gitignore

@@ -1 +1,2 @@
 node_modules
+.env

pg-todo-tutorial_section-1.md

@@ -1,11 +1,11 @@
 # Postgres and Graphql: Structure for Everyone
-  
-  **TL;DR** The structured nature of [Postgres][postgres] (A relational database mangement system) allows [Postgraphile][postgraphile] to generate a wonderful interface to [Graphql][graphql]. [Project Source at Github][source]
-  
-  [source]:<https://github.com/dkkloimwieder/pg-todo-tutorial>
-  [postgres]:<https://www.postgresql.org/>
-  [postgraphile]:<https://www.graphile.org/postgraphile/>
-  [graphql]:<https://graphql.org/>
+
+**TL;DR** The structured nature of [Postgres][postgres] (A relational database mangement system) allows [Postgraphile][postgraphile] to generate a wonderful interface to [Graphql][graphql]. [Project Source at Github][source]
+
+[source]: https://github.com/dkkloimwieder/pg-todo-tutorial
+[postgres]: https://www.postgresql.org/
+[postgraphile]: https://www.graphile.org/postgraphile/
+[graphql]: https://graphql.org/
 
 ## Why Postgres and Graphql?
 
@@ -17,16 +17,16 @@ This project will provide a brief overview of the underlying tools used to conne
 
 This project requires a basic working knowledge of [Git][git], [Node][node], and a local install of [Docker][docker] with [Docker-Compose][docker-compose] for creating an isolated Postgres database. Please refer to the official documentation for installation as it varies by operating system and is outside the scope of this tutorial. If you would prefer to use a local installation of Postgres this tutorial will still apply; skip the the docker-compose configuration and adjust the provided .env as neccesary. The corresponding [repo][source] is divided into branches in case you would like to start with a relatively clean slate or jump ahead.
 
-[git]:<https://git-scm.com/>
-[node]:<https://nodejs.org/en/>
-[docker]:<https://www.docker.com/>
-[docker-compose]:<https://docs.docker.com/compose/>
+[git]: https://git-scm.com/
+[node]: https://nodejs.org/en/
+[docker]: https://www.docker.com/
+[docker-compose]: https://docs.docker.com/compose/
 
 ## Create a Postgres instance
 
-This section begins with the `section-1` branch and includes a little directory structure, a `.env`, `database.json`, and a `docker-config.yml`. Let's begin: `git checkout section-1`
+This section begins with the `section-1` branch and includes a little directory structure, a `.local_env`, `database.json`, and a `docker-config.yml`. Let's begin: `git checkout section-1`
 
->Note: In the root directory of the project first please have a look at the provided `.env` file.  Please note that typically `.env` would ==**never**== be included in a public git repository. Its purpose is to provide a central place for environemtal variables which may or may not be super secret stuff like passwords or connection settings. Please make sure to add `.env` to your local .gitignore before proceeding: ` echo '.env' >> .gitignore `
+> Note: In the root directory of the project first please have a look at the provided `.env_example` file. You will want to copy it to your a local `.env`. Its purpose is to provide a central place for environemtal variables which may or may not be super secret stuff like passwords or connection settings. Please make sure to add `.env` to your local .gitignore before proceeding: `echo '.env' >> .gitignore`
 
 Let's take a look at the `.env`. The first three lines will be used by docker-compose to configure the new postgres instance with a required user, password and database name:
 
@@ -46,18 +46,18 @@ The two additional lines will be used by `db-migrate`, `postgraphile`, and `expr
 Next lets take a look at out `todo_db/docker-compose.yml`
 
 ```yml
-  version: "3.8"
-  services:
-    postgres:
-      image: "postgres"
-      ports:
-        - "5432:5432"
-      volumes:
-        - todovolume:/var/lib/postgresql/data/
-      env_file:
-        - ../.env
-  volumes:
-    todovolume:
+version: '3.8'
+services:
+  postgres:
+    image: 'postgres'
+    ports:
+      - '5432:5432'
+    volumes:
+      - todovolume:/var/lib/postgresql/data/
+    env_file:
+      - ../.env
+volumes:
+  todovolume:
 ```
 
 This file is responsible for the configuration of `docker-compose`. It specifies that we will use the official `postgres` docker image. `ports` specifies the exposed external port followed by the internal port postgres is using. Specifying `volumes` allows us to persist out database data. The volume will be created the first time that the container is brought up. `env_file` allows us to centralize(for the most part) our environment details. Refer to the [official][docker-compose] documentation if you would like to know more about the structure and specifics of `docker-compose.yml`.
@@ -86,7 +86,7 @@ yarn global add db-migrate
 
 Why do we need `db-migrate`available globally? It is recommended as the method for install by the official documentation as it is primarily used on the command line. It will find the local install when running globally and in fact use it so there are no worries about project specific versioning.
 
-[db-migrate]:<https://db-migrate.readthedocs.io/en/latest/>
+[db-migrate]: https://db-migrate.readthedocs.io/en/latest/
 
 Next lets look at `.db-migraterc`:
 
@@ -103,11 +103,11 @@ Now lets take a look at `database.json`:
 {
   "dev": {
     "driver": "pg",
-    "user": {"ENV": "POSTGRES_USER"},
-    "password": {"ENV": "POSTGRES_PASSWORD"},
-    "host": {"ENV": "POSTGRES_HOST"},
-    "database": {"ENV": "POSTGRES_DB"},
-    "port": {"ENV": "POSTGRES_PORT"}
+    "user": { "ENV": "POSTGRES_USER" },
+    "password": { "ENV": "POSTGRES_PASSWORD" },
+    "host": { "ENV": "POSTGRES_HOST" },
+    "database": { "ENV": "POSTGRES_DB" },
+    "port": { "ENV": "POSTGRES_PORT" }
   }
 }
 ```
@@ -130,13 +130,13 @@ CREATE SCHEMA IF NOT EXISTS todo_public;
 
 and now a corresponding down migrationg in `##############-create-schema-down.sql`
 
-  ```SQL
-  DROP SCHEMA todo_public;
-  ```
+```SQL
+DROP SCHEMA todo_public;
+```
 
 So what's going on here? If you have not seen too much sql and it appears its yelling at you with a harsh tone of capitalization, do not worry, that is just a formality. SQL is case insensitive so often times it increases readability if SQL keywords are capitalized. Feel free to use all lowercase everything if you prefer. Why do we need to migrations? For everything we do to modify the database, we want to be able to easily revert our changes. This practice is somewhat [contested][stackoverflow-migration], although I tend to like it, especially during projects like this which are primarily for experimentation.
 
-[stackoverflow-migration]:<https://nickcraver.com/blog/2016/05/03/stack-overflow-how-we-do-deployment-2016-edition/#database-migrations>
+[stackoverflow-migration]: https://nickcraver.com/blog/2016/05/03/stack-overflow-how-we-do-deployment-2016-edition/#database-migrations
 
 Now lets run the first migration: `db-migrate up`
 
@@ -166,5 +166,3 @@ DROP TABLE todo_public.todo;
 The down migrations simply drops the table.
 
 `db-migrate up` and we are off to the next section.
-
-

pg-todo-tutorial_section-2.md

@@ -2,12 +2,12 @@
 
 In this section we will get to play with [postgraphile][postgraphile] via CLI and then setup [express.js][express] as a more permanent solution.
 
-[postgraphile]: <https://www.graphile.org/postgraphile/>
-[express]: <https://expressjs.com/>
+[postgraphile]: https://www.graphile.org/postgraphile/
+[express]: https://expressjs.com/
 
 ## Section 2, Postgraphile and Friends
 
-If you are following along jump to **Start Section 2** below but if you are just now starting the tutorial at branch `section-2` you will want to make sure you have a postgres instance up and running with an appropriately configured `.env`. I have provided defaults that are not at all secure, at the very least a password change might be in order. Make sure to add `.env` to your `.gitignore` and then:
+If you are following along jump to **Start Section 2** below but if you are just now starting the tutorial at branch `section-2` you will want to make sure you have a postgres instance up and running with an appropriately configured `.env`. I have provided defaults in `.env_example` that are not at all secure, at the very least a password change might be in order. Make sure to add `.env` to your `.gitignore` and then:
 
 ```sh
  yarn install && yarn global add db-migrate
@@ -17,7 +17,7 @@ If you are following along jump to **Start Section 2** below but if you are just
 
 ---
 
-**Start Section 2**
+## Start Section 2
 
 Now lets test the database with `pgcli` or `psql` (You can use any postgres client really)
 
@@ -28,7 +28,7 @@ pgcli "postgres://postgres:[email protected]/todo_db"
 Now at the prompt we will list the contents of our `todo` table on our `todo_public` schema:
 
 ```psql
-postgres@127:todo_db> \d todo_public.todo 
+postgres@127:todo_db> \d todo_public.todo
 ```
 
 This should produce the output:
@@ -51,6 +51,8 @@ postgres@127:todo_db>
 
 If your client cannot connect or you cannot list the table something has gone awry. Try `\dt todo_public.*` to see if any table has been created under the schema `todo_public`. If you cannot connect check that your environmental variables are correct. The connection string is of the form `"postgres://POSTGRES_USER:POSTGRES_PASSWORD@POSTGRES_HOST/POSTGRES_DB"`. I am certain you will have it figured out in no time. If not, open an issue on the [github][source].
 
+[source]: https://github.com/dkkloimwieder/pg-todo-tutorial
+
 Install `postgraphile` and a plugin to simplify naming **globally**. Do not worry we will get rid of our global install when we are don with them. For now it is convenient for command line usage.
 
 `yarn global add postgraphile @graphile-contrib/pg-simplify-inflector`
@@ -83,6 +85,7 @@ Click the "GraphiQL GUI/IDE" link or open localhost:5000/graphiql in your browse
 <summary>Here is a screenshot if you would like to compare</summary>
 
 ![graphiql in the browser](assets/pg-todo-tutorial_graphiql.png)
+
 </details>
 
 Voila! We have easy access to our `todo` table. The `graphiql` explorer is primarily divided into four panes. The first is populated with queries or mutations depending on which you select that can built. The second is the actual interface to graphql queries. Clicking on items in the first pane will incrementally build queries in the second. The third pane is the output from the queries and the final pane is our documentation that postgraphile automagically generates for us.
@@ -107,9 +110,9 @@ Lets use the first pane to build a query. Select the `todos` dropdown and then c
 }
 ```
 
->Note: The pg-simplify-inflector simplifies the "inflection" or the method that it uses to create names when analyzing the database. Postgraphile is by default very verbose/explicit with naming as it [leads to less accidental conflicts][inflection]. In out example there is very little difference but try starting postgraphile without it and you will get the general idea of what it does.
+> Note: The pg-simplify-inflector simplifies the "inflection" or the method that it uses to create names when analyzing the database. Postgraphile is by default very verbose/explicit with naming as it [leads to less accidental conflicts][inflection]. In out example there is very little difference but try starting postgraphile without it and you will get the general idea of what it does.
 
-[inflections]: <https://www.graphile.org/postgraphile/inflection/>
+[inflections]: https://www.graphile.org/postgraphile/inflection/
 
 Before we move on lets explore the documentation and see what postgraphile has generated for us so far.
 We are primarily interested in adding a todo at this point, as we have none. Browse `mutations` and then `input:CreateTodoInput`. And then `todo:TodoInput`. Now we know! Although not really. The fields for input are listed but what if our coworker also wanted to explore our newly created API? Maybe we should add some helpful coments in out database that describe the fields that we will be using. Back to the SQL!
@@ -127,14 +130,14 @@ COMMENT ON COLUMN todo_public.todo.completed IS 'status of todo';
 and corresponding `migrations/sqls/######-todo-comments-down.sql`
 
 ```sql
-COMMENT ON TABLE todo_public.todo IS NULL; 
+COMMENT ON TABLE todo_public.todo IS NULL;
 COMMENT ON COLUMN todo_public.todo.id IS NULL;
-COMMENT ON COLUMN todo_public.todo.task IS NULL; 
+COMMENT ON COLUMN todo_public.todo.task IS NULL;
 COMMENT ON COLUMN todo_public.todo.created_at IS NULL;
 COMMENT ON COLUMN todo_public.todo.completed IS NULL;
 ```
 
->Note: COMMENT is postgreql specific
+> Note: COMMENT is postgreql specific
 
 `db-migrate up`
 
@@ -144,7 +147,7 @@ So lets create a todo. If we look in the leftmost panel we see only queries. Go
 
 ```gql
 mutation {
-  createTodo(input: {todo: {task: "Finish Section 2"}}) {
+  createTodo(input: { todo: { task: "Finish Section 2" } }) {
     todo {
       id
       completed
@@ -172,7 +175,7 @@ Ohhhh `NodeId`, where do you come from? Look in the documentation. It will tell
 
 `The ID scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as "4") or integer (such as 4) input value will be accepted as an ID.`
 
-Graphql is gets much of its power and usefulness from the fact that it *normalizes* our data. Each piece of data in graphql gets a unique identifier. The key is a hash of the data and allows us to query our endpoint with laser precision, and then also to cache the query. We will not need the NodeId for quite some time, but it is nice to know we can get a hold of any of our nodes(todos) by NodeId if the need arises (like client side cache manipulation).
+Graphql is gets much of its power and usefulness from the fact that it _normalizes_ our data. Each piece of data in graphql gets a unique identifier. The key is a hash of the data and allows us to query our endpoint with laser precision, and then also to cache the query. We will not need the NodeId for quite some time, but it is nice to know we can get a hold of any of our nodes(todos) by NodeId if the need arises (like client side cache manipulation).
 
 Have fun with graphiql for a little while. Make sure that you can fetch all the todos and fields, and perform an update and a deletion. Hint: The explorer (the first panel in graphiql) is your friend. Drop downs follow if you get stuck.
 
@@ -254,49 +257,53 @@ We will `mkdir server` for our express server to live in and then two files, and
 ```js
 /* server/index.js */
 
-const path = require('path')
-require('dotenv').config({ path: path.resolve(__dirname, '../.env') })
+const path = require('path');
+require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
 const express = require('express');
 const postgraphile = require('./postgraphile');
 
 const app = express();
 app.use(postgraphile);
 
-app.listen(process.env.PORT)
-
+app.listen(process.env.PORT);
 ```
 
-Let's also define the `PORT` we will be using to serve content in our `.env`: `echo 'PORT=3333' >> .env`
+Let's also define the `PORT` we will be using to serve content in our `.env`: `echo 'PORT=4000' >> .env`
 
 `server/index.js` is pretty straightforward at this point. We need `server/postgraphile.js` to define out postgraphile [middleware][middleware].
 
-[middleware]:<https://www.graphile.org/postgraphile/usage-library/>
+[middleware]: https://www.graphile.org/postgraphile/usage-library/
 
 ```js
 /* server/postgraphile.js */
 
 const { postgraphile } = require('postgraphile');
 const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector');
 
-const {POSTGRES_DB, POSTGRES_HOST, POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_PORT} = process.env
+const {
+  POSTGRES_DB,
+  POSTGRES_HOST,
+  POSTGRES_USER,
+  POSTGRES_PASSWORD,
+  POSTGRES_PORT,
+} = process.env;
 
 module.exports = postgraphile(
   {
     database: POSTGRES_DB,
     host: POSTGRES_HOST,
     user: POSTGRES_USER,
     password: POSTGRES_PASSWORD,
-    port: POSTGRES_PORT
+    port: POSTGRES_PORT,
   },
   'todo_public',
   {
     appendPlugins: [PgSimplifyInflectorPlugin],
     watchPg: true,
     graphiql: true,
-    enhanceGraphiql: true
+    enhanceGraphiql: true,
   }
-)
-
+);
 ```
 
 This file is also very basic and just assigns all the `.env` variables and CLI options we have already been using.
@@ -315,6 +322,4 @@ Then we just define a `watch` command in `package.json`
 }
 ```
 
-`yarn watch` and browse to `localhost:3333/graphiql` We are now serving our database via node. Oh happy day.
-
-
+`yarn watch` and browse to `localhost:4000/graphiql` We are now serving our database via node. Oh happy day.