Hands-On Full-Stack Web Development with GraphQL and React : Build Scalable Full-stack Applications While Learning to Solve Complex Problems with GraphQL

Unearth the power of GraphQL, React, Apollo, Node, and Express to build a scalable, production ready application Key Features Build full stack applications with modern APIs using GraphQL and Apollo Integrate Apollo into React and build frontend components using GraphQL Implement a self-updating notification pop-up with a unique GraphQL feature called Subscriptions Book Description 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. What you will learn Resolve data from multi-table database and system architectures Build a GraphQL API by implementing models and schemas with Apollo and Sequelize Set up an Apollo Client and build front end components using React Use Mocha to test your full-stack application Write complex React components and share data across them Deploy your application using Docker Who this book is for The book is for web developers who want to enhance their skills and build complete full stack applications using industry standards. Familiarity with JavaScript, React, and GraphQL is expected to get the most from this book. Table of Contents Preparing Your Development Environment Setting up GraphQL with Express.js Connecting to The Database Integrating React into the Backend with Apollo Reusable React Components Authentication with Apollo and React Handling Image Uploads Routing in React Implementing Server-Side Rendering Real-Time Subscriptions Writing Tests Optimizing GraphQL with Apollo Engine Continuous Deployment with CircleCI and Heroku Cover Title Page Copyright and Credits www.PacktPub.com Contributors Table of Contents Preface Chapter 1: 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 Chapter 2: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 Chapter 3: 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 Chapter 4: 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 Chapter 5: 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 Chapter 6: 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 Chapter 7: 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 Chapter 8: 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 Chapter 9:Implementing Server-Side Rendering Introduction to server-side rendering SSR in Express.js Authentication with SSR Running Apollo queries with SSR Summary Chapter 10: 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 Chapter 11: 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 Chapter 12: 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 Chapter 13: 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 Index **Unearth the power of GraphQL, React, Apollo, Node, and Express to build a scalable, production ready application** ## Key Features * Build full stack applications with modern APIs using GraphQL and Apollo * Integrate Apollo into React and build frontend components using GraphQL * Implement a self-updating notification pop-up with a unique GraphQL feature called Subscriptions ## Book Description 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. ## What you will learn * Resolve data from multi-table database and system architectures * Build a GraphQL API by implementing models and schemas with Apollo and Sequelize * Set up an Apollo Client and build front end components using React * Use Mocha to test your full-stack application * Write complex React components and share data across them * Deploy your application using Docker ## Who this book is for The book is for web developers who want to enhance their skills and build complete full stack applications using industry standards. Familiarity with JavaScript, React, and GraphQL is expected to get the most from this book. 1. Preparing Your Development Environment 2. Setting up GraphQL with Express.js 3. Connecting to The Database 4. Integrating React into the Backend with Apollo 5. Reusable React Components 6. Authentication with Apollo and React 7. Handling Image Uploads 8. Routing in React 9. Implementing Server-Side Rendering 10. Real-Time Subscriptions 11. Writing Tests 12. Optimizing GraphQL with Apollo Engine 13. Continuous Deployment with CircleCI and Heroku