Full-Stack Web Development with GraphQL and React - Second Edition

Full-Stack Web Development with GraphQL and React - Second Edition

by Sebastian Grebe
Released February 2022
Publisher(s): Packt Publishing
ISBN: 9781801077880

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Unleash the power of GraphQL, React 17, Node, and Express to build a scalable and production-ready application from scratch to be deployed on AWS

Key Features

  • Build full-stack applications with modern APIs using GraphQL and React Hooks
  • 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 and GraphQL, when combined, provide you with a very dynamic, efficient, and stable tech stack to build web-based applications. GraphQL is a modern solution for querying an API that represents an alternative to REST and is the next evolution in web development.

This book guides you in creating a full-stack web application from scratch using modern web technologies such as Apollo, Express.js, Node.js, and React. First, you'll start by configuring and setting up your development environment. Next, the book demonstrates how to solve complex problems with GraphQL, such as abstracting multi-table database architectures and handling image uploads using Sequelize. You'll then build a complete Graphbook from scratch. While doing so, you'll cover the tricky parts of connecting React to the backend, and maintaining and synchronizing state. In addition to this, you'll also learn how to write Reusable React components and use React Hooks. Later chapters will guide you through querying data and authenticating users in order to enable user privacy. Finally, you'll explore how to deploy your application on AWS and ensure continuous deployment using Docker and CircleCI.

By the end of this web development book, you'll have learned how to build and deploy scalable full-stack applications with ease using React and GraphQL.

What you will learn

  • Build a GraphQL API by implementing models and schemas with Apollo and Sequelize
  • Set up an Apollo Client and build frontend components using React
  • Write Reusable React components and use React Hooks
  • Authenticate and query user data using GraphQL
  • Use Mocha to write test cases for your full-stack application
  • Deploy your application to AWS using Docker and CircleCI

Who this book is for

This React GraphQL book is for web developers familiar with React and GraphQL who want to enhance their skills and build full-stack applications using industry standards like React, Apollo, Node.js, and SQL at scale while learning to solve complex problems with GraphQL.

Publisher resources

Download Example Code

Table of contents

  1. Full-Stack Web Development with GraphQL and React
  2. Second Edition
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  7. Section 1: Building the Stack
  8. Chapter 1: Preparing Your Development Environment
    1. Technical requirements
    2. Understanding the application architecture
      1. The basic setup
    3. Installing and configuring Node.js
    4. Setting up React
      1. Preparing and configuring webpack
      2. Rendering your first React component
      3. Rendering arrays from React state
      4. CSS with webpack
      5. Event handling and state updates with React
      6. Controlling document heads with React Helmet
      7. Production build with webpack
    5. Useful development tools
    6. Summary
  9. Chapter 2: Setting Up GraphQL with Express.js
    1. Technical requirements
    2. Getting started with Node.js and Express.js
      1. Setting up Express.js
      2. Running Express.js in development
    3. Routing in Express.js
      1. Serving our production build
    4. Using Express.js middleware
      1. Installing important middleware
      2. Express Helmet
      3. Compression with Express.js
      4. CORS in Express.js
    5. Combining Express.js with Apollo
      1. Writing your first GraphQL schemas
      2. Implementing GraphQL resolvers
      3. Sending GraphQL queries
      4. Using multiple types in GraphQL schemas
      5. Writing your first GraphQL mutation
    6. Backend debugging and logging
      1. Logging in Node.js
      2. Debugging with Postman
    7. Summary
  10. Chapter 3: Connecting to the Database
    1. Technical requirements
    2. Using databases in GraphQL
      1. Installing MySQL for development
      2. Creating a database in MySQL
    3. Integrating Sequelize into our Node.js stack
      1. Connecting to a database with Sequelize
      2. Using a configuration file with Sequelize
    4. Writing database models
      1. Your first database model
      2. Your first database migration
      3. Importing models with Sequelize
    5. Seeding data with Sequelize
    6. Using Sequelize with GraphQL
      1. Global database instance
      2. Running the first database query
    7. One-to-one relationships in Sequelize
      1. Updating the table structure with migrations
      2. Model associations in Sequelize
      3. Seeding foreign key data
    8. Mutating data with Sequelize
    9. Many-to-many relationships
      1. Model and migrations
      2. Chats and messages in GraphQL
      3. Seeding many-to-many data
      4. Creating a new chat
      5. Creating a new message
    10. Summary
  11. Section 2: Building the Application
  12. Chapter 4: Hooking Apollo into React
    1. Technical requirements
    2. Installing and configuring Apollo Client
      1. Installing Apollo Client
      2. Testing Apollo Client
      3. Binding Apollo Client to React
    3. Using Apollo Client in React
      1. Querying in React with Apollo Client
    4. Mutating data with Apollo Client
      1. Apollo useMutation Hook
      2. Updating the UI with Apollo Client
    5. Implementing chats and messages
      1. Fetching and displaying chats
      2. Fetching and displaying messages
      3. Sending messages through mutations
    6. Pagination in React and GraphQL
    7. Debugging with the Apollo Client Devtools
    8. Summary
  13. Chapter 5: Reusable React Components and React Hooks
    1. Technical requirements
    2. Introducing React patterns
      1. Controlled components
      2. Functional components
      3. Conditional rendering
      4. Rendering child components
    3. Structuring our React application
      1. The React file structure
      2. Efficient Apollo React components
    4. Extending Graphbook
      1. The React context menu
      2. The React application bar
      3. The React Context API versus Apollo Consumer
    5. Documenting React applications
      1. Setting up React Styleguidist
      2. React PropTypes
    6. Summary
  14. Chapter 6: Authentication with Apollo and React
    1. Technical requirements
    2. What are JSON Web Tokens?
    3. localStorage versus cookies
    4. Authentication with GraphQL
      1. Apollo login mutation
      2. The React login form
      3. Apollo signup mutation
      4. React signup form
      5. Authenticating GraphQL requests
      6. Accessing the user context from resolver functions
      7. Logging out using React
    5. Summary
  15. Chapter 7: Handling Image Uploads
    1. Technical requirements
    2. Setting up Amazon Web Services
      1. Configuring an AWS S3 bucket
      2. Generating AWS access keys
    3. Uploading images to Amazon S3
      1. GraphQL image upload mutation
      2. React image cropping and uploading
    4. Summary
  16. Chapter 8: Routing in React
    1. Technical requirements
    2. Setting up React Router
      1. Installing React Router
      2. Implementing your first route
      3. Secured routes
      4. Catch-all routes in React Router
    3. Advanced routing with React Router
      1. Parameters in routes
      2. Querying the user profile
      3. Programmatic navigation in React Router
      4. Remembering the redirect location
    4. Summary
  17. Chapter 9: Implementing Server-Side Rendering
    1. Technical requirements
    2. Introducing SSR
    3. Setting up SSR in Express.js to render React on the server
    4. Authentication with SSR
    5. Running Apollo queries with SSR
    6. Summary
  18. Chapter 10: Real-Time Subscriptions
    1. Technical requirements
    2. Using GraphQL with WebSockets
    3. Digging deeper into Apollo subscriptions
      1. Subscriptions on Apollo Server
      2. Subscriptions on Apollo Client
    4. Authentication with Apollo subscriptions
    5. Notifications with Apollo subscriptions
    6. Summary
  19. Chapter 11: Writing Tests for React and Node.js
    1. Technical requirements
    2. Testing with Mocha
      1. Our first Mocha test
      2. Starting the backend with Mocha
      3. Verifying the correct routing
    3. Testing the GraphQL API with Mocha
      1. Testing the authentication
      2. Testing authenticated requests
    4. Testing React with Enzyme
    5. Summary
  20. Section 3: Preparing for Deployment
  21. Chapter 12: Continuous Deployment with CircleCI and AWS
    1. Technical requirements
    2. Preparing the final production build
    3. Setting up Docker
      1. What is Docker?
      2. Installing Docker
      3. Dockerizing your application
      4. Building and running Docker containers
      5. Multi-stage Docker production builds
    4. Amazon RDS
    5. Configuring continuous integration
    6. Deploying applications to Amazon ECS
      1. Setting up CircleCI with Amazon ECR and ECS
    7. Summary
    8. Why subscribe?
  22. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: Full-Stack Web Development with GraphQL and React - Second Edition
  • Author(s): Sebastian Grebe
  • Release date: February 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801077880