Introduction to GraphQL and Apollo Client with React

Introduction to GraphQL and Apollo Client with React

GraphQL is a data query language that is rapidly becoming a popular alternative to REST. In this Introduction to GraphQL and Apollo Client with React training,  attendees master writing GraphQL queries and mutations, as well as how to use the Apollo Client, a leading GraphQL client.

GRAPHQL TRAINING OBJECTIVES

All students will:

• • Understand the role and purpose of GraphQL Types, and how those types are used together
  • Write GraphQL queries and mutations, as well as leverage introspection to determine the schema of the server
  • Execute GraphQL queries from JavaScript code using the fetch API
  • Utilize the Apollo Client library to execute GraphQL queries and mutations

GRAPHQL TRAINING PREREQUISITES

Students should have extensive experience in developing React components and extensive coding experience with Modern JavaScript (ES2017 and later).

GRAPHQL TRAINING MATERIALS

All GraphQL students receive comprehensive courseware.

SOFTWARE NEEDED FOR EACH PC:

• JavaScript-aware IDE such as WebStorm or Visual Studio Code; a JavaScript-aware text editor would also suffice
• Docker
• Related lab files that Accelebrate provides
• For classes delivered online, all participants need either dual monitors or a separate device logged into the online session so that they can do their work on one screen and watch the instructor on the other. A separate computer connected to a projector or large screen TV would be another way for students to see the instructor’s screen simultaneously with working on their own.

GRAPHQL TRAINING OUTLINE

• Introduction
  • What is GraphQL?
  • GraphQL compared to REST Services
  • Apollo compared to Flux, Redux, and Relay
  • Benefits of GraphQL
  • Benefits of Apollo Client, Server and Engine
• GraphQL Types and Server Configuration
  • Scheme, Object, Scalar, & List Types
  • Interface Types
  • Understanding Fields, Arguments and Resolve
• GraphQL Queries
  • Using the GraphQL web-based client for making queries and exploring documentation
  • Querying connected nodes on the graph, and exploring how that works.
  • Passing arguments into queries.
  • Renaming a field with aliasing.
  • Breaking a large query into fragments.
  • Nesting many fragments.
  • Exploring Apollo GraphQL Client Requests with Tooling
• GraphQL Mutations
  • Explore Mutation Queries and Input Types
  • Execute Mutation Queries with Variables
  • Structuring Mutation Query Results
  • Configuring Mutations with Apollo Client
  • Store Updates, Optimistic Responses
  • Handling Error from Failed Mutations
• Additional GraphQL Topics
  • Enum, Union, Interface Types
  • Inline Fragments
  • Directives
  • Introspection Queries
  • Pre-fetching Data
  • Subscriptions
• Connecting to React
  • Using the web browser fetch API to connect to a GraphQL server
  • Using Google Chrome extensions to examine GraphQL queries
  • Migrate an existing React application from REST Services to GraphQL
• Connecting to React using Apollo Client
  • Setting up the Apollo Networking Environment
  • Using the Apollo Provider to connect GraphQL to React
  • Co-locating the GraphQL Query with the React component
  • Containers with GraphQL function and decorator
  • Container Config API
  • Container with Query API
• Conclusion