Introduction to GraphQL with React

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

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate.  Our Full Stack Web Developer Journey includes a wide variety of courses in core web development, React, React Native, design and security which may be blended with this course for a track that best suits your development objectives.

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)

Please see the Related Courses tab for Pre-Requisite course specifics and links, links to similar courses you might review as an alternative, as well as suggested Next-Step Follow-On Courses and Learning Path recommendations.

Course Agenda

1. Introduction to GraphQL

• What is GraphQL?
• Why GraphQL?
• GraphQL problems

2. Exploring GraphQL APIs

• The GraphiQL editor
• The basics of the GraphQL language
• Examples from the GitHub API

3. 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 

4. 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 

5. 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 

6. 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 

Course Materials

Student Materials: Each participant will receive a digital Student Guide and/or Course Notes, code samples, software tutorials, step-by-step written lab instructions (as applicable), diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. In some cases we can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Course Recordings, Live Instructor Follow-on Support, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.