[Meta] Exercise Overview

[marktani]

Apollo Client on React/RN/Angular 2

• Quickly explain specific information depending on the library.
• mention Apollo Client for Vanilla JS
• introduce the data model needed for the GraphQL backend
• (starting here, the chapters follow a different track depending on the chosen framework/library)

Exercise 01: Getting Started

Result

• As a user, I can run a preconfigured app with Apollo.

Steps

• clone or create a boilerplate
• install needed Apollo packages with yarn or npm
• create and configure the network layer with a token written in the code

Covers

• Network layer

Exercise 02: Basic Queries

Result

• As a user, I can see a “Welcome {{ user }} in your pokedex” page.

Steps

• create a new page component
• create a title component
• create a first query (viewer) without any parameters
• connect the query to the component
• debug the query in redux debugger

Covers

• Basic Queries
• Data in Components
• Present the data model for the pokedex
• Excursion: Redux DevTools

Exercise 03: Advanced Queries

Result

• As a user, I can see a list with three pokemons by default.

Steps

• create a PokemonCard component which will render the row
• create a react list view component
• connect the PokemonCard component the render row of the list view
• write a query that return the list of three pokemons

Covers

• Nested Queries
• query variables

Exercise 04: Fragments

Result

• As a user, when I click to a pokemon, I can see more details about it.

Steps

• create a new route
• write a query with the id of that route to query the according pokemon
• create a more complicated component (maybe two or three components for that page) and connect them to the result
  maybe the right time to introduce fragments

Covers

• Using Fragments
• Data normalization using dataIdFromObject
• Data Caching

Exercise 05: Mutations

Result

• As a user, I can add a new pokemon to my pokedex.

Steps

• first mutation (create mutation)
• add a loader + maybe query network status in apollo (Add networkStatus to queries. apollographql/apollo-client#707)
• add a call to action with a design specific to platform

Covers

• Basic Mutations
• Excursion: updateQueries

Exercise 06: Optimistic UI

Result

• As a user, I can edit and delete my pokemon.

Steps

• use connect(graphql(query1, propsname1), graphql(mutation1, propsname2)

Covers

• Optimistic UI

Exercise 07: Pagination

Result
As a user, I can browse my pokemons in groups of 10.

Steps

Covers

• Pagination

[marktani]

All exercises should be broken down into small high level steps ("build a pokemon card component") to reach the result of the exercise. Each implementation (React/RN/Angular/...) should break these steps further down into low level steps ("we will use React Router to realize routes").

Each exercise should contribute to at least one topic in #1 (with exceptions).

For the actual exercise chapter on the website, both the high level and low level steps should be conveyed.

[marktani]

I just added Data normalization using dataIdFromObject to the first exercise: http://dev.apollodata.com/react/cache-updates.html#dataIdFromObject

This is needed for consistent data.

[tychota]

@marktani : for me this is not necessary to start with !

This can be cover in step 03.

While Apollo can do basic caching based on the shape of GraphQL queries and their results, Apollo won’t be able to associate objects fetched by different queries without additional information about the identities of the objects returned from the server.

[marktani]

Yea that's right. I moved it down to 04, because the pokemon preview card will use a different query than the overview component in step 04. Before that, we only have one query for pokemons so there is no need for this data normalization step.

[marktani]

I added Data Caching as a topic we should talk about in #1. I think we can briefly mention that things are cached in exercise 02 and once we cover data normalization we could expand on this topic.

[marktani]

I'm thinking about moving the updatePokemon mutation to 05, while having deletePokemon and createPokemon in 06.

The reasoning is that automatic refresh can be accomplished by just using dataIdFromObject and including the changed fields in the mutation results for updatePokemon. For createPokemon and deletePokemon we have to additionally use updateQueries or reducer to accomplish the same.

Additionally, I think that showing the optimistic UI feature only works with updateMutation, so I'd move that to 05 as well.

Edit: I'm going with what we have for now and see how that works out 🙂

[marktani]

Closing this. For more discussion add a comment or new issue.