Full-Stack Web Development with GraphQL and React

Sebastian Grebe

• Publisher: Packt Publishing
• Year: 2022
• eBook ISBN: 9781801079174
• Edition: 2
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

Unleash the power of GraphQL, React 17, Node, and Express to build a scalable and production-ready application from scratch to be deployed on AWSKey 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 SubscriptionsBook DescriptionReact 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 CircleCIWho this book is forThis 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.

Section 1: Building the Stack

Each journey starts with a first step. Our first step will be to take a look at how to get the basic setup with Node.js, React, MySQL, and GraphQL running. Knowing how to build such a setup yourself and how the different technologies work together is very important to understand more advanced topics later in the book.

In this section, there are the following chapters:

• Chapter 1, Preparing Your Development Environment
• Chapter 2, Setting Up GraphQL with Express.js
• Chapter 3, Connecting to the Database

Chapter 1: Preparing Your Development Environment

The application we are going to build in this book will be a simplified version of Facebook, called Graphbook. We will allow our users to sign up and log in to read and write posts and chat with friends, similar to what we can do on common social networks.

When developing an application, being well-prepared is always a requirement. However, before we start, we need to put our stack together. In this chapter, we will explore whether our techniques work well with our development process, what we need before getting started, and which tools can help us when building software.

This chapter explains the architecture for our application by going through the core concepts, the complete process, and preparing for a working React setup.

This chapter covers the following topics:

• Architecture and technology
• Thinking critically about how to architect a stack
• Building the React and GraphQL stack
• Installing and configuring Node.js
• Setting up a React development environment with webpack, Babel, and other requirements
• Debugging React applications using Chrome DevTools and React Developer Tools

Technical requirements

The source code for this chapter is available in the following GitHub repository: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-GraphQL-and-React-Second-Edition/tree/main/Chapter01.

Understanding the application architecture

Since its initial release in 2015, GraphQL has become the new alternative to the standard SOAP and REST APIs. GraphQL is a specification, like SOAP and REST, that you can follow to structure your application and data flow. It is so innovative because it allows you to query specific fields of entities, such as users and posts. This functionality makes it very good for targeting multiple platforms at the same time. Mobile apps may not need all the data that's displayed inside the browser on a desktop computer. The query you send consists of a JSON-like object that defines which information your platform requires. For example, a query for a post may look like this:

post {

id

text

user {

user_id

name

}

}

GraphQL resolves the correct entities and data, as specified in your query object. Every field in GraphQL represents a function that resolves to a value. Those functions are called Resolver functions. The return value could be just the corresponding database value, such as the name of a user, or it could be a date, which is formatted by your server before returning it.

GraphQL is completely database agnostic and can be implemented in any programming language. To skip the step of implementing a GraphQL library, we are going to use Apollo, which is a GraphQL server for the Node.js ecosystem. Thanks to the team behind Apollo, this is very modular. Apollo works with many of the common Node.js frameworks, such as Hapi, Koa, and Express.js.

We are going to use Express.js as our basis because it is used on a wide scale in the Node.js and GraphQL communities. GraphQL can be used with multiple database systems and distributed systems to offer a straightforward API over all your services. It allows developers to unify existing systems and handle data fetching for client applications.

How you combine your databases, external systems, and other services into one server backend is up to you. In this book, we are going to use a MySQL server via Sequelize as our data storage. SQL is the most well-known and commonly used database query language, and with Sequelize, we have a modern client library for our Node.js server to connect with our SQL server.

HTTP is the standard protocol for accessing a GraphQL API. It also applies to Apollo Servers. However, GraphQL is not fixed to one network protocol. Everything we have mentioned so far is everything important for the backend.

When we get to the frontend of our Graphbook application, we are mainly going to use React. React is a JavaScript UI framework that was released by Facebook that has introduced...

Table of contents

• Full-Stack Web Development with GraphQL and React
• Second Edition
• Preface
• Section 1: Building the Stack
• Chapter 1: Preparing Your Development Environment
• Chapter 2: Setting Up GraphQL with Express.js
• Chapter 3: Connecting to the Database
• Section 2: Building the Application
• Chapter 4: Hooking Apollo into React
• Chapter 5: Reusable React Components and React Hooks
• Chapter 6: Authentication with Apollo and React
• Chapter 7: Handling Image Uploads
• Chapter 8: Routing in React
• Chapter 9: Implementing Server-Side Rendering
• Chapter 10: Real-Time Subscriptions
• Chapter 11: Writing Tests for React and Node.js
• Section 3: Preparing for Deployment
• Chapter 12: Continuous Deployment with CircleCI and AWS
• Other Books You May Enjoy