Hands-On Full-Stack Web Development with GraphQL and React: Build scalable full-stack applications while learning to solve complex problems with GraphQL

✍ Scribed by Sebastian Grebe

• Publisher: Packt Publishing
• Year: 2019
• Tongue: English
• Leaves: 455
• Category: Library

✦ Synopsis

Unearth the power of GraphQL, React, Apollo, Node, and Express to build a scalable, production ready application

Key Features

• Build full stack applications with modern APIs using GraphQL and Apollo
• Integrate Apollo into React and build frontend components using GraphQL
• Implement a self-updating notification pop-up with a unique GraphQL feature called Subscriptions

Book Description

React, one of the most widely used JavaScript frameworks, allows developers to build fast and scalable front end applications for any use case. GraphQL is the modern way of querying an API. It represents an alternative to REST and is the next evolution in web development. Combining these two revolutionary technologies will give you a future-proof and scalable stack you can start building your business around.

This book will guide you in implementing applications by using React, Apollo, Node.js and SQL. We'll focus on solving complex problems with GraphQL, such as abstracting multi-table database architectures and handling image uploads. Our client, and server will be powered by Apollo. Finally we will go ahead and build a complete Graphbook. While building the app, we'll cover the tricky parts of connecting React to the back end, and maintaining and synchronizing state. We'll learn all about querying data and authenticating users. We'll write test cases to verify the front end and back end functionality for our application and cover deployment. By the end of the book, you will be proficient in using GraphQL and React for your full-stack development requirements.

What you will learn

• Resolve data from multi-table database and system architectures
• Build a GraphQL API by implementing models and schemas with Apollo and Sequelize
• Set up an Apollo Client and build front end components using React
• Use Mocha to test your full-stack application
• Write complex React components and share data across them
• Deploy your application using Docker

Who this book is for

The book is for web developers who want to enhance their skills and build complete full stack applications using industry standards. Familiarity with JavaScript, React, and GraphQL is expected to get the most from this book.

Table of Contents

1. Preparing Your Development Environment
2. Setting up GraphQL with Express.js
3. Connecting to The Database
4. Integrating React into the Backend with Apollo
5. Reusable React Components
6. Authentication with Apollo and React
7. Handling Image Uploads
8. Routing in React
9. Implementing Server-Side Rendering
10. Real-Time Subscriptions
11. Writing Tests
12. Optimizing GraphQL with Apollo Engine
13. Continuous Deployment with CircleCI and Heroku

✦ Table of Contents

Cover
Title Page
Copyright and Credits
www.PacktPub.com
Contributors
Table of Contents
Preface
Chapter 1: Preparing Your Development Environment
Application architecture
The basic setup
Installing and configuring Node.js
Setting up React
Preparing and configuring webpack
Render 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
Analyzing bundle size
Summary
Chapter 2:Setting up GraphQL with Express.js
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 schema
Implementing GraphQL resolvers
Sending GraphQL queries
Using multiples types in GraphQL schemas
Writing your first GraphQL mutation
Back end debugging and logging
Logging in Node.js
Debugging with Postman
Summary
Chapter 3: Connecting to The Database
Using databases in GraphQL
Installing MySQL for development
Creating a database in MySQL
Integrating Sequelize into our 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 Apollo
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
Chat model
Message model
Chats and messages in GraphQL
Seeding many-to-many data
Creating a new chat
Creating a new message
Summary
Chapter 4: Integrating React into the Back end with Apollo
Setting up Apollo Client
Installing Apollo Client
Testing the Apollo Client
Binding the Apollo Client to React
Using the Apollo Client in React
Querying in React with the Apollo Client
Apollo HoC query
The Apollo Query component
Mutations with the Apollo Client
The Apollo Mutation HoC
The Apollo Mutation component
Updating the UI with the Apollo Client
Refetching queries
Updating the Apollo cache
Optimistic UI
Polling with the Query component
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 Developer Tools
Summary
Chapter 5: Reusable React Components
Introducing React patterns
Controlled components
Stateless functions
Conditional rendering
Rendering child components
Structuring our React application
The React file structure
Efficient Apollo React components
The Apollo Query component
The Apollo Mutation component
Extending Graphbook
The React context menu
FontAwesome in React
React helper components
The GraphQL updatePost mutation
The Apollo deletePost mutation
The React application bar
The React Context API versus Apollo Consumer
The React Context API
Apollo Consumer
Documenting React applications
Setting up React Styleguidist
React PropTypes
Summary
Chapter 6: Authentication with Apollo and React
JSON Web Tokens
localStorage versus cookie
Authentication with GraphQL
Apollo login mutation
The React login form
Apollo sign up mutation
React sign up form
Authenticating GraphQL requests
Accessing the user context from resolver functions
Chats and messages
CurrentUser GraphQL query
Logging out using React
Summary
Chapter 7: Handling Image Uploads
Setting up Amazon Web Services
Creating an AWS S3 bucket
Generating AWS access keys
Uploading images to Amazon S3
GraphQL image upload mutation
React image cropping and uploading
Summary
Chapter 8: Routing in React
Setting up React Router
Installing React Router
Implementing your first route
Secured routes
Catch-all routes in React Router
Advanced routing with React Router
Parameters in routes
Querying the user profile
Programmatic navigation in React Router
Remembering the redirect location
Summary
Chapter 9:Implementing Server-Side Rendering
Introduction to server-side rendering
SSR in Express.js
Authentication with SSR
Running Apollo queries with SSR
Summary
Chapter 10: Real-Time Subscriptions
GraphQL and WebSockets
Apollo Subscriptions
Subscriptions on the Apollo Server
Subscriptions on the Apollo Client
Authentication with Apollo Subscriptions
Notifications with Apollo Subscriptions
Summary
Chapter 11: Writing Tests
Testing with Mocha
Our first Mocha test
Starting the back end with Mocha
Verifying the correct routing
Testing GraphQL with Mocha
Testing the authentication
Testing authenticated requests
Testing React with Enzyme
Summary
Chapter 12: Optimizing GraphQL with Apollo Engine
Setting up Apollo Engine
Analyzing schemas with Apollo Engine
Performance metrics with Apollo Engine
Error tracking with Apollo Engine
Caching with Apollo Server and the Client
Summary
Chapter 13: Continuous Deployment with CircleCI and Heroku
Preparing the final production build
Code-splitting with React Loadable and webpack
Code-splitting with SSR
Setting up Docker
What is Docker?
Installing Docker
Dockerizing your application
Writing your first Dockerfile
Building and running Docker containers
Multi-stage Docker production builds
Amazon Relational Database Service
Configuring Continuous Integration
Deploying applications to Heroku
Summary
Other Books You May Enjoy
Index