Introduction to GraphQL with React

Introduction to GraphQL with React is a hands-on course that guides you through implementing applications leveraging React, Apollo, and Node.js. Throughout the course, you will learn how to solve complex problems with GraphQL, such as abstracting multi-table database architectures. You will work with the client and server powered by Apollo and learn how to build a complete full-stack GraphQL project. While building the app, you will also explore the tricky parts of connecting React and maintaining and synchronizing state within React and synchronizing with the MySQL database. By the end of the course, you will be proficient in using GraphQL, Apollo and React.

Retail Price: $2,195.00

Next Date: Request Date

Course Days: 3


Request a Date

Request Custom Course


Course Objectives

This hands-on course combines engaging expert lessons, demos, and group discussions with real-world, productivity-focused machine-based labs and exercises. Working in a hands-on learning environment, led by a Full-Stack Web Development expert instructor, students will learn about and explore:

  • Building full stack applications with modern APls using GraphQL, React, MySQL and Apollo
  • Integrating Apollo into React and build front-end components using GraphQL
  • Building a GraphQL API by implementing models and schemas
  • Writing React components and share data across them and utilizing the MySQL database

Course Prerequisites

This course is geared for attendees with Web development skills who wish to explore using GraphQL, React, Apollo, Node, and Express to build a scalable, production ready application.

Students should have:

  • Practical web development/ programming experience. This course is not for non-developers.
  • Prior hands-on experience working with React
  • Experience working with Windows and should be able to navigate the Windows command line.
  • An understanding of database concepts
  • Solid foundational mathematics and logic skills.

Take Before:

  • TT4190 Introduction to React Basics (3 days)
  • TT4195 Masteting React Web Developer's Workshop (5 days)

Course Agenda

 

  1. Introduction to GraphQL
  • What is GraphQL?
  • Why GraphQL?
  • GraphQL problems
  1. Exploring GraphQL APIs
  • The GraphiQL editor
  • The basics of the GraphQL language
  • Examples from the GitHub API
  1. Preparing Your Development Environment
  • Technical requirements
  • Understanding the application architecture
  • Installing and configuring Node.js
  • Setting up React
  • Preparing and configuring webpack 
  • Rendering your first React component 
  • Rendering arrays from React state 
  • CSS with webpack 
  • Event handling and state updates with React  
  • Controlling document heads with React Helmet 
  • Production build with webpack 
  • Useful development tools 
  1. Setting Up GraphQL with Express.js
  • Technical requirements
  • Getting started with Node.js and Express.js
  • Setting up Express.js
  • Running Express.js in development 
  • Routing in Express.js 
  • Serving our production build
  • Using Express.js middleware
  • Installing important middleware
  • Express Helmet
  • Compression with Express.js
  • CORS in Express.js
  • Combining Express.js with Apollo
  • Writing your first GraphQL schemas 
  • Implementing GraphQL resolvers
  • Sending GraphQL queries
  • Using multiple types in GraphQL schemas
  • Writing your first GraphQL mutation
  • Backend debugging and logging
  • Logging in Node.js
  • Debugging with Postman 
  1. Connecting to the Database
  • Using databases in GraphQL
  • Installing MySQL for development
  • Creating a database in MySQL 
  • Integrating Sequelize into our Node.js stack
  • Connecting to a database with Sequelize
  • Using a configuration file with Sequelize
  • Writing database models
  • Your first database model
  • Your first database migration
  • Importing models with Sequelize
  • Seeding data with Sequelize
  • Using Sequelize with GraphQL
  • Global database instance
  • Running the first database query
  • One-to-one relationships in Sequelize 
  • Updating the table structure with migrations 
  • Model associations in Sequelize
  • Seeding foreign key data
  • Mutating data with Sequelize
  • Many-to-many relationships
  • Model and migrations
  • Chats and messages in GraphQL
  • Seeding many-to-many data  
  • Creating a new chat 
  • Creating a new message 
  1. Hooking Apollo into React
  • Installing and configuring Apollo Client  
  • Installing Apollo Client  
  • Testing Apollo Client  
  • Binding Apollo Client to React  
  • Using Apollo Client in React  
  • Querying in React with Apollo Client   
  • Mutating data with Apollo Client  
  • Apollo useMutation Hook  
  • Updating the UI with Apollo Client  
  • Implementing chats and messages  
  • Fetching and displaying chats  
  • Fetching and displaying messages 
  • Sending messages through mutations 
  • Pagination in React and GraphQL 
  • Debugging with the Apollo Client Devtools 


Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com


Request a Date