GraphQL Serverside Setup

• git checkout server
• Apollo graphQL server Setup

GraphQL Client Side

1. React client setup

   • git checkout step-01

2. Apollo client setup & API Query

   • git checkout step-02
   • Fetch data from external graphQL API
   • Apollo chrome extension
   • Show what apollo cache contains

3. Apollo client & hooks

   • git checkout step-03
   • Apollo provider wrapped around APP Component
   • Apollo chrome externsion configured by passing "connectToDevTools": true to ApolloClient
   • Use Apollo extension to figure out the query needed to fetch data

4. Querying Data

   • git checkout step-04
   • Use useQuery method from apollo/react-hook to run query
   • Show useQuery from apollo docs
   • Add some dummy data to show the Pet list items

5. Mutation

   • git checkout step-05
   • Use variables to pass input data
   • Use useMutation hook to create a new pet

6. Keeping Cache in Sync

   • git checkout step-06
   • Refetching matching queries after a mutation
   • Use update method on mutation
   • Watch queries
   • Don't need refresh to see the latest created item

7. Optimistic UI updates

   • git checkout step-07
   • Introduce a delay in client using ApolloLink.from & SetTimeout
   • Start an OptimisticResponse within createPet

8. Client Side Schema

   • git checkout step-08
   • How to manage local state with Apollo & GraphQL using client side schemas. By adding a directive.
   • Verify with a console.log to see the age property in the user data

9. Fragments

   • git checkout step-09
   • Instead of duplicating fields within different queries, one can use fragments.