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

coverpage

Title Page

Copyright and Credits

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

www.PacktPub.com

Why subscribe?

Packt.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Reviews

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

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

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

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