Cover image for Hands-On Full-Stack Web Development with GraphQL and React

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

Author Sebastian Grebe
Release Date: 2019/01/01
ISBN: 9781789134520
Topic:
0%
216
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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

  1. Title Page
  2. Copyright and Credits
    1. Hands-On Full-Stack Web Development with GraphQL and React
  3. www.PacktPub.com
    1. Why subscribe?
    2. Packt.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. Preparing Your Development Environment
    1. Application architecture
      1. The basic setup
    2. Installing and configuring Node.js
    3. Setting up React
      1. Preparing and configuring webpack
      2. Render your first React component
      3. Rendering arrays from React state
      4. CSS with webpack
      5. Event handling and state updates with React
      6. Controlling document heads with React Helmet
      7. Production build with webpack
    4. Useful development tools
      1. Analyzing bundle size
    5. Summary
  7. Setting up GraphQL with Express.js
    1. Node.js and Express.js
      1. Setting up Express.js
      2. Running Express.js in development
    2. Routing in Express.js
      1. Serving our production build
    3. Using Express.js middleware
      1. Installing important middleware
      2. Express Helmet
      3. Compression with Express.js
      4. CORS in Express.js
    4. Combining Express.js with Apollo
      1. Writing your first GraphQL schema
      2. Implementing GraphQL resolvers
      3. Sending GraphQL queries
      4. Using multiples types in GraphQL schemas
      5. Writing your first GraphQL mutation
    5. Back end debugging and logging
      1. Logging in Node.js
      2. Debugging with Postman
    6. Summary
  8. Connecting to The Database
    1. Using databases in GraphQL
      1. Installing MySQL for development
      2. Creating a database in MySQL
    2. Integrating Sequelize into our stack
      1. Connecting to a database with Sequelize
      2. Using a configuration file with Sequelize
    3. Writing database models
      1. Your first database model
      2. Your first database migration
      3. Importing models with Sequelize
    4. Seeding data with Sequelize
    5. Using Sequelize with Apollo
      1. Global database instance
      2. Running the first database query
    6. One-to-one relationships in Sequelize
      1. Updating the table structure with migrations
      2. Model associations in Sequelize
      3. Seeding foreign key data
    7. Mutating data with Sequelize
    8. Many-to-many relationships
      1. Model and migrations
        1. Chat model
        2. Message model
      2. Chats and messages in GraphQL
      3. Seeding many-to-many data
      4. Creating a new chat
      5. Creating a new message
    9. Summary
  9. Integrating React into the Back end with Apollo
    1. Setting up Apollo Client
      1. Installing Apollo Client
      2. Testing the Apollo Client
      3. Binding the Apollo Client to React
    2. Using the Apollo Client in React
      1. Querying in React with the Apollo Client
        1. Apollo HoC query
        2. The Apollo Query component
    3. Mutations with the Apollo Client
      1. The Apollo Mutation HoC
      2. The Apollo Mutation component
      3. Updating the UI with the Apollo Client
        1. Refetching queries
        2. Updating the Apollo cache
        3. Optimistic UI
        4. Polling with the Query component
    4. Implementing chats and messages
      1. Fetching and displaying chats
      2. Fetching and displaying messages
      3. Sending messages through Mutations
    5. Pagination in React and GraphQL
    6. Debugging with the Apollo Client Developer Tools
    7. Summary
  10. Reusable React Components
    1. Introducing React patterns
      1. Controlled components
      2. Stateless functions
      3. Conditional rendering
      4. Rendering child components
    2. Structuring our React application
      1. The React file structure
      2. Efficient Apollo React components
        1. The Apollo Query component
        2. The Apollo Mutation component
    3. Extending Graphbook
      1. The React context menu
        1. FontAwesome in React
        2. React helper components
        3. The GraphQL updatePost mutation
        4. The Apollo deletePost mutation
      2. The React application bar
      3. The React Context API versus Apollo Consumer
        1. The React Context API
        2. Apollo Consumer
    4. Documenting React applications
      1. Setting up React Styleguidist
      2. React PropTypes
    5. Summary
  11. Authentication with Apollo and React
    1. JSON Web Tokens
    2. localStorage versus cookie
    3. Authentication with GraphQL
      1. Apollo login mutation
      2. The React login form
      3. Apollo sign up mutation
      4. React sign up form
      5. Authenticating GraphQL requests
      6. Accessing the user context from resolver functions
        1. Chats and messages
        2. CurrentUser GraphQL query
      7. Logging out using React
    4. Summary
  12. Handling Image Uploads
    1. Setting up Amazon Web Services
      1. Creating an AWS S3 bucket
      2. Generating AWS access keys
    2. Uploading images to Amazon S3
      1. GraphQL image upload mutation
      2. React image cropping and uploading
    3. Summary
  13. Routing in React
    1. Setting up React Router
      1. Installing React Router
      2. Implementing your first route
      3. Secured routes
      4. Catch-all routes in React Router
    2. Advanced routing with React Router
      1. Parameters in routes
      2. Querying the user profile
      3. Programmatic navigation in React Router
      4. Remembering the redirect location
    3. Summary
  14. Implementing Server-Side Rendering
    1. Introduction to server-side rendering
    2. SSR in Express.js
    3. Authentication with SSR
    4. Running Apollo queries with SSR
    5. Summary
  15. Real-Time Subscriptions
    1. GraphQL and WebSockets
    2. Apollo Subscriptions
      1. Subscriptions on the Apollo Server
      2. Subscriptions on the Apollo Client
    3. Authentication with Apollo Subscriptions
    4. Notifications with Apollo Subscriptions
    5. Summary
  16. Writing Tests
    1. Testing with Mocha
      1. Our first Mocha test
      2. Starting the back end with Mocha
      3. Verifying the correct routing
    2. Testing GraphQL with Mocha
      1. Testing the authentication
      2. Testing authenticated requests
    3. Testing React with Enzyme
    4. Summary
  17. Optimizing GraphQL with Apollo Engine
    1. Setting up Apollo Engine
    2. Analyzing schemas with Apollo Engine
    3. Performance metrics with Apollo Engine
    4. Error tracking with Apollo Engine
    5. Caching with Apollo Server and the Client
    6. Summary
  18. Continuous Deployment with CircleCI and Heroku
    1. Preparing the final production build
      1. Code-splitting with React Loadable and webpack
      2. Code-splitting with SSR
    2. Setting up Docker
      1. What is Docker?
      2. Installing Docker
      3. Dockerizing your application
        1. Writing your first Dockerfile
      4. Building and running Docker containers
      5. Multi-stage Docker production builds
    3. Amazon Relational Database Service
    4. Configuring Continuous Integration
    5. Deploying applications to Heroku
    6. Summary
  19. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
18.227.48.131