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

Authentication with Apollo Subscriptions

In Chapter 6, Authentication with Apollo and React, of this book, we implemented authentication through the localStorage of your browser. The back end generates a signed JWT that the client sends with every request inside the HTTP headers. In Chapter 9, Implementing Server-side Rendering, we extended this logic to support cookies to allow server-side rendering. Now that we've introduced WebSockets, we need to take care of them separately, as we did with the server-side rendering and our GraphQL API.

How is it possible for the user to receive new messages when they aren't authenticated on the back end for the WebSocket transport protocol?

The best way to figure this out is to have a look at your browser's developer tools. Let's assume that we have one browser window where we log in with user A. This user chats with another...