Introduction to Apollo Client with React

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Introduction to Apollo Client with React training class teaches attendees how to build rich client-side web applications using HTML, CSS, JavaScript, React, GraphQL, and Apollo Client. Students develop real-world JavaScript and GraphQL and Apollo Client applications and learn how to use modern JavaScript programming techniques with an emphasis on core JavaScript concepts, the latest JavaScript syntax features, the latest React APIs and techniques (including hooks) and the popular GraphQL client library Apollo Client. This class is for developers with modern JavaScript experience and React. React developers looking to connect a React application to a data source or to move beyond traditional REST services will greatly benefit from this class.

Students will build a project using React, GraphQL, and Apollo Client to explore and deepen their knowledge of GraphQL and the Apollo Client. Developers can do wonders with GraphQL and Apollo Client, an ecosystem is the client part of the full-featured Apollo framework. Some knowledge of GraphQL is beneficial for the class but now required. The class will primarily focus on how Apollo leverages GraphQL and related principles such as caching, colocating queries, etc… Generally, students with no GraphQL knowledge can learn it as we use it. That being said there are many important GraphQL language features and concepts which are not directly covered in this course but are covered in the Introduction to GraphQL course.

Course ObjectivesObjectives

  • Develop real-world JavaScript applications with React, GraphQL and Apollo Client
  • Understand declarative data fetching
  • Explore how to code tagged GraphQL queries and mutations
  • Learn how to use Apollo Client hooks for queries and mutations
  • Utilize variables in queries and mutations
  • Perform direct reads and writes from the local cache
  • Write queries which query the local store and the GraphQL server
  • Explore various options for updating client data

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript, web development, and React. Students strongly encouraged to take the Introduction to GraphQL course if they have no GraphQL experience.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Introduction to Apollo Client
    1. What is Apollo?
    2. Apollo compared to Flux, Redux, and Relay
    3. Benefits of GraphQL, React and Apollo
  2. Connecting React to GraphQL
    1. Set up the Apollo Client and Provider
    2. Execute a GraphQL Query
    3. Handle Loading State and Error Information
    4. Co-locate GraphQL Query with the React component
    5. Query Component (demo only) and Hook (focus of class)
    6. React Higher Order Component vs React Hook
    7. Role of Apollo Store and Cache
  3. Apollo & Component Trees
    1. Using Fragments
    2. Writing GraphQL Fragments
    3. Linking Fragments from a Child to a Parent
    4. Nesting Many Fragment Containers
    5. Exploring Apollo GraphQL Requests and State using Tooling
    6. GraphQL Function and Higher Order Components (demo only)
  4. Working with a Collection of Data
    1. GraphQL and Collections of Data
    2. Offset vs. Cursor Based Pagination
    3. Incremental Loading
    4. Connection Directive
  5. Performing Mutations
    1. Exploring Kinds of Mutations: Add, Delete and Update Node
    2. Understanding GraphQL beyond CRUD operations
    3. Configuring Mutations within Apollo Client
    4. Store Updates, Optimistic Responses
    5. Handling Errors from Failed Mutations
    6. Reading and Writing from the Store for Local State
Scroll to Top