Book Image

Hands-on Full-Stack Web Development with GraphQL and React

By : Sebastian Grebe

Book Image

Hands-on Full-Stack Web Development with GraphQL and React

By: Sebastian Grebe

Overview of this book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Preparing Your Development Environment

Preparing Your Development Environment

Application architecture

Installing and configuring Node.js

Setting up React

Useful development tools

Setting up GraphQL with Express.js

Setting up GraphQL with Express.js

Node.js and Express.js

Routing in Express.js

Using Express.js middleware

Combining Express.js with Apollo

Back end debugging and logging

Connecting to The Database

Connecting to The Database

Using databases in GraphQL

Integrating Sequelize into our stack

Writing database models

Seeding data with Sequelize

Using Sequelize with Apollo

One-to-one relationships in Sequelize

Mutating data with Sequelize

Many-to-many relationships

Integrating React into the Back end with Apollo

Integrating React into the Back end with Apollo

Setting up Apollo Client

Using the Apollo Client in React

Mutations with the Apollo Client

Implementing chats and messages

Pagination in React and GraphQL

Debugging with the Apollo Client Developer Tools

Reusable React Components

Reusable React Components

Introducing React patterns

Structuring our React application

Extending Graphbook

Documenting React applications

Authentication with Apollo and React

Authentication with Apollo and React

JSON Web Tokens

localStorage versus cookie

Authentication with GraphQL

Handling Image Uploads

Handling Image Uploads

Setting up Amazon Web Services

Uploading images to Amazon S3

Routing in React

Routing in React

Setting up React Router

Advanced routing with React Router

Implementing Server-Side Rendering

Implementing Server-Side Rendering

Introduction to server-side rendering

SSR in Express.js

Authentication with SSR

Running Apollo queries with SSR

Real-Time Subscriptions

Real-Time Subscriptions

GraphQL and WebSockets

Apollo Subscriptions

Authentication with Apollo Subscriptions

Notifications with Apollo Subscriptions

Writing Tests

Testing with Mocha

Testing GraphQL with Mocha

Testing React with Enzyme

Optimizing GraphQL with Apollo Engine

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

Continuous Deployment with CircleCI and Heroku

Continuous Deployment with CircleCI and Heroku

Preparing the final production build

Setting up Docker

Amazon Relational Database Service

Configuring Continuous Integration

Deploying applications to Heroku

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Amazon Relational Database Service

AWS offers the Amazon Relation Database Service (RDS), which is an easy tool for setting up a relational database in just a few clicks. Shortly, I will explain how to create your first database with RDS, and afterwards, we will look at how to insert environment variables correctly, in order to get a database connection going with our application.

The first step is to log in to the AWS Console, like we did in Chapter 7, Handling Image Uploads. You can find the service by clicking on the Services tab in the top bar and searching for RDS.

After navigating to RDS, you will see the dashboard for the Relational Database Service, as shown in the following screenshot:

The first step is to initialize a new database by hitting the Create database button. You will be presented with a new screen, where you should select an engine for our new database. I...