Hands-On Full-Stack Web Development with GraphQL and React电子书

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

Polling with the Query component

Implementing chats and messages

Fetching and displaying chats

Fetching and displaying messages

Sending messages through Mutations

Pagination in React and GraphQL

Debugging with the Apollo Client Developer Tools

Summary

Reusable React Components

Introducing React patterns

Controlled components

Stateless functions

Conditional rendering

Rendering child components

Structuring our React application

The React file structure

Efficient Apollo React components

The Apollo Query component

The Apollo Mutation component

Extending Graphbook

The React context menu

FontAwesome in React

React helper components

The GraphQL updatePost mutation

The Apollo deletePost mutation

The React application bar

The React Context API versus Apollo Consumer

The React Context API

Apollo Consumer

Documenting React applications

Setting up React Styleguidist

React PropTypes

Summary

Authentication with Apollo and React

JSON Web Tokens

localStorage versus cookie

Authentication with GraphQL

Apollo login mutation

The React login form

Apollo sign up mutation

React sign up form

Authenticating GraphQL requests

Accessing the user context from resolver functions

Chats and messages

CurrentUser GraphQL query

Logging out using React

Summary

Handling Image Uploads

Setting up Amazon Web Services

Creating an AWS S3 bucket

Generating AWS access keys

Uploading images to Amazon S3

GraphQL image upload mutation

React image cropping and uploading

Summary

Routing in React

Setting up React Router

Installing React Router

Implementing your first route

Secured routes

Catch-all routes in React Router

Advanced routing with React Router

Parameters in routes

Querying the user profile

Programmatic navigation in React Router

Remembering the redirect location

Summary

Implementing Server-Side Rendering

Introduction to server-side rendering

SSR in Express.js

Authentication with SSR

Running Apollo queries with SSR

Summary

Real-Time Subscriptions

GraphQL and WebSockets

Apollo Subscriptions

Subscriptions on the Apollo Server

Subscriptions on the Apollo Client

Authentication with Apollo Subscriptions

Notifications with Apollo Subscriptions

Summary

Writing Tests

Testing with Mocha

Our first Mocha test

Starting the back end with Mocha

Verifying the correct routing

Testing GraphQL with Mocha

Testing the authentication

Testing authenticated requests

Testing React with Enzyme

Summary

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

Summary

Continuous Deployment with CircleCI and Heroku

Preparing the final production build

Code-splitting with React Loadable and webpack

Code-splitting with SSR

Setting up Docker

What is Docker?

Installing Docker

Dockerizing your application

Writing your first Dockerfile

Building and running Docker containers

Multi-stage Docker production builds

Amazon Relational Database Service

Configuring Continuous Integration

Deploying applications to Heroku

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think