added readme/codegen explanation

Author: mwarger

Diff for: README.md

@@ -0,0 +1,30 @@
+# graphql-typescript-react-demo
+
+## Usage and Codegen
+
+Run `yarn install` in the root as well as the `app` and `api` directories. Run `yarn api` to start the API (to actually run queries for data, you'll need a Movies Database API key). For codegen, you will not need to worry about it.
+
+### Codegen
+
+Run yarn to install all dependencies.
+
+The `codegen.yml` file will be what handles generating TS types for queries and mutations.
+
+The important part of this file is
+
+```
+app/src/generated/graphql.tsx:
+    documents: app/src/**/*.tsx
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+```
+
+This says to generate a file at `app/src/generated/graphql.tsx` based on the documents (`gql` tagged queries and mutations) that exist at `app/src/**/*.tsx` (file glob) and apply the listed plugins for the generation of code and types.
+
+For example, check out `app/src/pages/graphql.ts`. There are two queries and a fragment for grabbing some movies.
+
+Run the `codegen` command from the root. This will use the queries and mutations provided to created types and hooks and put it in the generated folder (`app/src/generated/graphql.tsx`). You can look in there for the output.
+
+This is used in the `NowPlaying.tsx` component. Types for fragments are also generated. We map over the movies retured in the NowPlaying component and output MoviePoster components. Checkout `MoviePoster.tsx` for an example of using a generated fragment type.

Diff for: app/src/pages/graphql.ts

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
 
-// TODO: create fragment for movie object
 export const MOVIE_FRAGMENT = gql`
   fragment MovieFragment on Movie {
     id