Address Pavlos's feedback (#33)

* chore: correct name of start command for exercise 0

Co-authored-by: Anna Carey <anna.carey@artsymail.com>

* chore: mention watchman as a dependency to watch mode

Co-authored-by: Anna Carey <anna.carey@artsymail.com>

* chore: add table of contents for all exercises in root README

Co-authored-by: Anna Carey <anna.carey@artsymail.com>

* Add explicit null return to Exercise 1

Co-authored-by: Steven Hicks <steven.j.hicks@gmail.com>

* Clarify switch from dummy artist object to props and destructuring of render prop arg in Exercise 1

Co-authored-by: Steven Hicks <steven.j.hicks@gmail.com>

* Add target emoji to learning objectives in each ReadMe

Co-authored-by: Steven Hicks <steven.j.hicks@gmail.com>

* Add computer emoji callout to naming changes exercises

Co-authored-by: Steven Hicks <steven.j.hicks@gmail.com>

* Add roadblocks suggestion to FAQ in root readme

Co-authored-by: Steven Hicks <steven.j.hicks@gmail.com>

Co-authored-by: Anna Carey <anna.carey@artsymail.com>

README.md

@@ -20,6 +20,14 @@ Start with [exercise 0 on the Relay compiler](./src/exercises/00-Relay-Compiler/
 
 For support, there is a `completed` folder inside each exercise. If you get stuck, check there to see the code in the completed state for the exercise.
 
+### All Exercises
+
+- [Exercise 0: Relay Compiler](./src/exercises/00-Relay-Compiler/README.md)
+- [Exercise 1: QueryRenderer](./src/exercises/01-Query-Renderer/README.md)
+- [Exercise 2: Fragment Container](./src/exercises/02-Fragment-Container/README.md)
+- [Exercise 3: Testing Queries](./src/exercises/03-Testing-Queries/README.md)
+- [Exercise 99: What's Next](./src/exercises/99-Whats-Next/README.md)
+
 ## FAQ
 
 ### Which version of Relay are we learning?
@@ -31,3 +39,7 @@ These exercises are for [Relay Modern](https://relay.dev/docs/v10.1.3/new-in-rel
 These exercises have been built in support of new engineers at Artsy; thus they are based on code that looks like ours. Relay recently released version 11, including hooks, but neither [Artsy's web app](https://github.com/artsy/force) nor [mobile app](https://github.com/artsy/eigen) are running it yet.
 
 When our codebase is updated to use a newer version of Relay, we'll update these exercises as well.
+
+### What do I do if I run into roadblocks?
+
+There are `Common Mistakes` listed at the bottom of many of the instructions, so be sure to check those out if you run into roadblocks. If you still are blocked, open an issue.

package.json

@@ -18,7 +18,7 @@
     "prepare": "husky install",
     "prettier-write": "yarn run prettier --write",
     "relay": "relay-compiler --src ./src --schema src/graphql/schema/fakeArtsy.graphql  --extensions ts tsx --language typescript",
-    "start-exercise-1": "yarn start-web",
+    "start-exercise-0": "yarn start-web",
     "start-exercises": "concurrently -n relay,web \"yarn relay --watch\" \"yarn start-web\"",
     "start-web": "parcel src/index.html",
     "type-check": "tsc --noEmit"

src/exercises/00-Relay-Compiler/README.md

@@ -14,15 +14,15 @@ Independently querying for the data that each component needs would be terribly
 
 At build-time, Relay's compiler inspects the component tree to discover all data needed, and generates the appropriate infrastructure to execute optimized GraphQL queries at runtime.
 
-In this exercise we'll see how the Relay compiler generates the artifacts it needs to make efficient data requests.
+🎯 In this exercise we'll see how the Relay compiler generates the artifacts it needs to make efficient data requests.
 
 ## Exercise 0: Compiling with Relay
 
 ### Setting up
 
 Start the app:
 
-💻 _Run `yarn start-exercise-1` from a console pointed at the root of this project_
+💻 _Run `yarn start-exercise-0` from a console pointed at the root of this project_
 
 View the app for this exercise in a browser:
 
@@ -198,6 +198,8 @@ Watch for changes and automatically run Relay compilation by including the `--wa
 
 The remaining exercises are configured to automatically run Relay compilation when you make changes. You won't need to run it manually anymore.
 
+Note: if you get an error when starting watch mode that you need `watchman` installed, install it with `brew install watchman` and retry.
+
 ## Resources
 
 The [Thinking In Relay](https://relay.dev/docs/v10.1.3/thinking-in-relay) doc is a great resource for understanding how Relay efficiently renders data from a GraphQL endpoint.

src/exercises/01-Query-Renderer/README.md

@@ -12,7 +12,7 @@ Therefore we must emit a QueryRenderer for any tree of components that we want t
 
 A QueryRenderer takes two critical arguments: a query to execute against the GraphQL endpoint, and the React component to render once the data is retrieved.
 
-In this exercise we'll create a new page in our app and use a QueryRenderer to show data from our GraphQL endpoint.
+🎯 In this exercise we'll create a new page in our app and use a QueryRenderer to show data from our GraphQL endpoint.
 
 ## Exercise 1: Rendering data with a QueryRenderer
 
@@ -22,6 +22,8 @@ Start the app:
 
 💻 _Run `yarn start-exercises` from a console pointed at the root of this project_
 
+Note: if you get an error when running this command that you need `watchman` installed, install it with `brew install watchman` and retry.
+
 View the app for this exercise in a browser:
 
 💻 _Visit [localhost:1234/exercise-1](http://localhost:1234/exercise-1)_
@@ -52,16 +54,16 @@ export const Artist1: React.FC<Artist1Props> = props => {
 
 _./Artist1.tsx_
 
-2: [The Artist1QueryRenderer component](./Artist1QueryRenderer.tsx) is the entry point to this page. It extracts the artist ID from the current path, and renders the Artist1 UI component based on it:
+2: [The Artist1QueryRenderer component](./Artist1QueryRenderer.tsx) is the entry point to this page. It extracts the artist ID from the current path, and renders the Artist1 UI component based on the dummy artist object:
 
 ```typescript
 export const Artist1QueryRenderer = () => {
   const { artistID } = useParams()
-  const artist = {
+  const dummyArtist = {
     artistID,
   }
 
-  return <Artist1 artist={artist} />
+  return <Artist1 artist={dummyArtist} />
 }
 ```
 
@@ -126,7 +128,7 @@ return (
       }
     `}
     variables={{}}
-    render={() => <Artist1 artist={artist} />}
+    render={() => <Artist1 artist={dummyArtist} />}
   />
 )
 ```
@@ -147,28 +149,34 @@ The `query` argument is the query we want to execute against our GraphQL endpoin
 
 For now, our query is requesting the `name` and `birthYear` of the `artist` with `id:1`. We'll correct that hard-coded artist ID soon!
 
-Relay is very particular about the names you give queries. Try changing the name of the query from `Artist1QueryRendererQuery` to `Artist1QueryRendererQueryyyyyy` and see what happens in your console:
+Relay is very particular about the names you give queries. 
+
+💻 _Try changing the name of the query from `Artist1QueryRendererQuery` to `Artist1QueryRendererQueryyyyyy` and see what happens in your console:_
 
 ```
 [relay] Parse error: Error: RelayFindGraphQLTags: Operation names in graphql tags must be prefixed with the module name and end in "Mutation", "Query", or "Subscription". Got `Artist1QueryRendererQueryyyyyy` in module `Artist1QueryRenderer`. in "exercises/01-Query-Renderer/Artist1QueryRenderer.tsx"
 ```
 
 This is an easy mistake to make — expect to encounter this error many times with Relay 😅.
 
+💻 _Change `Artist1QueryRendererQueryyyyyy` back to `Artist1QueryRendererQuery`._
+
 ##### `variables={{}}`
 
 The `variables` prop takes an object containing variables to pass into the query. For now we're passing an empty object.
 
 ##### `render={() => <Artist1 artist={artist}>}`
 
-The `render` prop is a function that will be called to render the child component tree. For now we're telling it to render an `Artist1` component using the `artist` object we constructed from the URL params. We're not passing the artist from the server response yet. This explains why we still don't see anything useful on our artist detail page.
+The `render` prop is a function that will be called to render the child component tree. The argument to that function is an object that includes props, among other things. `props` is destructured from the `render` prop function's argument.
+
+For now we're telling it to render an `Artist1` component using the `artist` object we constructed from the URL params. We're not passing the artist from the server response yet. This explains why we still don't see anything useful on our artist detail page.
 
-💻 _Update the `render` prop to pass the artist from the resolved query, if it exists:_
+💻 _Update the `render` prop to pass the artist from the resolved query as a prop if it exists instead of from the dummy object:_
 
 ```typescript
   render={({ props }) => {
     if (!props || !props.artist) {
-      return;
+      return null;
     }
     return <Artist1 artist={props.artist} />;
   }}

src/exercises/01-Query-Renderer/beginning/Artist1QueryRenderer_beginning.tsx

@@ -4,9 +4,9 @@
 
 // export const Artist1QueryRenderer = () => {
 //   const { artistID } = useParams();
-//   const artist = {
+//   const dummyArtist = {
 //     artistID,
 //   };
 
-//   return <Artist1 artist={artist} />;
+//   return <Artist1 artist={dummyArtist} />;
 // };

src/exercises/02-Fragment-Container/README.md

@@ -12,7 +12,7 @@ Relay allows us to also precisely define the _data_ required to render each comp
 
 If a QueryRenderer is the top-level component of a tree that renders data, Fragment Containers define the contract each child component needs from the data. While there is a single QueryRenderer associated with each network request in our app, each request will retrieve the data for many Fragment Containers. Imagine the QueryRenderer as the tree and the Fragment Container as its branches.
 
-In this exercise we'll convert several small, isolated components into Fragment Containers, and specify the data each component requires.
+🎯 In this exercise we'll convert several small, isolated components into Fragment Containers, and specify the data each component requires.
 
 ## Exercise 2: Isolating specified data with a Fragment Container
 
@@ -143,14 +143,18 @@ The first argument to `createFragmentContainer` is the display component you wan
 
 The second argument is an object containing properties for each root-level field your component needs to query. In this case, our GraphQL specifies `fragment Artist2_artist on Artist`, which indicates we need these fields from the `Artist` type of our GraphQL endpoint. The results of this query fragment will be passed to our `Artist2` component as a prop named `artist`.
 
-We learned in the previous exercise that Relay is particular about the names you give queries associated with QueryRenderers — it's also very particular about the names of fragments you specify for Fragment Containers. Try changing the name of the GraphQL fragment from `Artist2_artist` to `Artist2_artisttttt` and you'll get an error in your console:
+We learned in the previous exercise that Relay is particular about the names you give queries associated with QueryRenderers — it's also very particular about the names of fragments you specify for Fragment Containers. 
+
+💻 _Try changing the name of the GraphQL fragment from `Artist2_artist` to `Artist2_artisttttt` and you'll get an error in your console:_
 
 ```
 [relay] Parse error: Error: RelayFindGraphQLTags: Container fragment names must be `<ModuleName>_<propName>`. Got `Artist2_artist`, expected `Artist2_artist`. in "exercises/02-Fragment-Container/Artist2.tsx"
 ```
 
 This is another easy mistake to make.
 
+💻 _Change `Artist2_artisttttt` back to `Artist2_artist`._
+
 💻 _Replace the `Artist2Props` interface with one generated by Relay:_
 
 ```typescript