Download Full Stack Web Development Course and more Study notes Computer science in PDF only on Docsity!
Full-Stack
Web Development
with GraphQL and React
Second Edition
Taking React from frontend to full-stack with
GraphQL and Apollo
Sebastian Grebe
Full-Stack Web
Development with
GraphQL and React
Second Edition
Taking React from frontend to full-stack with
GraphQL and Apollo
Sebastian Grebe
BIRMINGHAM—MUMBAI
I thank my love, who has been able to give me the time I needed. Her support made every day better and her help accomplishing my goals is just great!
Contributors
About the author
Sebastian Grebe is a verified computer science expert for application development. He is a young entrepreneur working on a variety of products targeting the consumer market. He specializes in web development using the newest technologies, such as React, the Phoenix framework, Kubernetes, and many more. Furthermore, he has experience in merging old and new applications, developing cross-platform apps with React Native, and writing efficient APIs and backends with Node.js and Elixir.
Currently, he works as an engineering manager on a microservice-oriented architecture using micro frontends to power a scalable e-commerce platform.
Table of Contents
Preface
Section 1: Building the Stack
1
Preparing Your Development Environment
Technical requirements 4
Understanding the application architecture 4
The basic setup 6
Installing and configuring Node.js 7
Setting up React 8
Preparing and configuring webpack 10 Rendering your first React component 14 Rendering arrays from React state 16
CSS with webpack 19 Event handling and state updates with React 21 Controlling document heads with React Helmet 24 Production build with webpack 25
Useful development tools 26 Summary 28
2
Setting Up GraphQL with Express.js
Technical requirements 30
Getting started with Node.js and Express.js 30
Setting up Express.js 30 Running Express.js in development 32
Routing in Express.js 32 Serving our production build 33
Using Express.js middleware 35 Installing important middleware 36 Express Helmet 36 Compression with Express.js 37 CORS in Express.js 38
Combining Express.js with Apollo 38 Writing your first GraphQL schemas 41
5 6
- Implementing GraphQL resolvers
- Sending GraphQL queries
- schemas Using multiple types in GraphQL
- Writing your first GraphQL mutation
- Backend debugging and logging
- Logging in Node.js
- Debugging with Postman
- Summary
- Technical requirements Connecting to the Database
- Using databases in GraphQL
- Installing MySQL for development
- Creating a database in MySQL
- Node.js stack Integrating Sequelize into our
- with Sequelize Connecting to a database
- with Sequelize Using a configuration file
- Writing database models
- Your first database model
- Your first database migration
- Importing models with Sequelize
- Seeding data with Sequelize
- Using Sequelize with GraphQL
- Global database instance
- Running the first database query
- Sequelize One-to-one relationships in
- migrations Updating the table structure with
- Model associations in Sequelize
- Seeding foreign key data
- Mutating data with Sequelize
- Many-to-many relationships
- Model and migrations
- Chats and messages in GraphQL
- Seeding many-to-many data
- Creating a new chat
- Creating a new message
- Summary
- Technical requirements Hooking Apollo into React
- Apollo Client Installing and configuring
- Installing Apollo Client
- Testing Apollo Client
- Binding Apollo Client to React
- Using Apollo Client in React Table of Contents ix
- Querying in React with Apollo Client
- Apollo Client Mutating data with
- Apollo useMutation Hook
- Updating the UI with Apollo Client
- messages Implementing chats and
- Fetching and displaying chats
- Fetching and displaying messages
- Sending messages through mutations
- and GraphQL Pagination in React
- Client Devtools Debugging with the Apollo
- Summary
- Technical requirements Reusable React Components and React Hooks
- Introducing React patterns
- Controlled components
- Functional components
- Conditional rendering
- Rendering child components
- application Structuring our React
- The React file structure
- Efficient Apollo React components
- Extending Graphbook
- The React context menu
- The React application bar
- Consumer The React Context API versus Apollo
- applications Documenting React
- Setting up React Styleguidist
- React PropTypes
- Summary
- Technical requirements Authentication with Apollo and React
- What are JSON Web Tokens?
- localStorage versus cookies
- Authentication with GraphQL
- Apollo login mutation
- The React login form
- Apollo signup mutation
- React signup form
- Authenticating GraphQL requests
- resolver functions Accessing the user context from
- Logging out using React
- Summary
x Table of Contents
7
Handling Image Uploads
Technical requirements 246
Setting up Amazon Web Services 246
Configuring an AWS S3 bucket 248 Generating AWS access keys 251
Uploading images to Amazon S3 253 GraphQL image upload mutation 254 React image cropping and uploading 258
Summary 269
8
Routing in React
Technical requirements 271
Setting up React Router 272
Installing React Router 272 Implementing your first route 274 Secured routes 277 Catch-all routes in React Router 279
Advanced routing with React Router 280 Parameters in routes 281 Querying the user profile 288 Programmatic navigation in React Router 290 Remembering the redirect location 294
Summary 295
9
Implementing Server-Side Rendering
Technical requirements 298
Introducing SSR 298
Setting up SSR in Express.js to render React on the server 299
Authentication with SSR 315 Running Apollo queries with SSR 322 Summary 327
10
Real-Time Subscriptions
Technical requirements 330
Using GraphQL with WebSockets 330
Digging deeper into Apollo subscriptions 331 Subscriptions on Apollo Server 332 Subscriptions on Apollo Client 339
Preface
The increase in web developers relying on JavaScript to build their frontends and backends has been huge in the last few years. This book covers some of the major technologies from Apollo, Express.js, Node.js, and React. We will go through how to set up React and Apollo to run GraphQL requests against your backend built with Node.js and Sequelize. On top of that, we will introduce testing for the components or functions we have written and automate the deployment on AWS ECS with CircleCI. By the end of the book, you will know how to combine the newest frontend and backend technologies.
Who this book is for
This book is for web developers familiar with React and GraphQL who want to enhance their skills and build full-stack applications using industry standards such as React, Apollo, Node.js, and SQL at scale while learning to solve complex problems with GraphQL.
What this book covers
Chapter 1, Preparing Your Development Environment, explains the architecture of an application by going through some core concepts, the complete process, and preparing a working React setup. We will see how React, Apollo Client, and Express.js fit together and cover some good practices when working with React. Further, we will show you how to debug the frontend with React Developer Tools.
Chapter 2, Setting Up GraphQL with Express.js, teaches you how to configure your backend by installing Express.js and Apollo via NPM. Express.js will be used for the web server, which handles and passes all GraphQL requests to Apollo.
Chapter 3, Connecting to the Database, discusses the opportunities that GraphQL offers when it comes to mutating and querying data. As an example, we will use traditional SQL to build a full application. To simplify the database code, we will use Sequelize, which lets us query our SQL Server with a normal JavaScript object and also allows us to use MySQL, MSSQL, PostgresSQL, or just a SQLite file. We will build models and schemas for users and posts in Apollo and Sequelize.
Preface xv
To get the most out of this book
To get started with this book and write functional code, you need to meet some requirements. Regarding the operating system, you can run the complete code and other dependencies on nearly all operating systems out there. The main dependencies of this book are explained one by one within this book.
Software/hardware covered in the book :
- Node.js 14+
- React 17+
- Sequelize 6+
- MySQL 5 or 8
Download the example code files
You can download the example code files for this book from GitHub at https:// github.com/PacktPublishing/Full-Stack-Web-Development-with- GraphQL-and-React-Second-Edition. If there's an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here:
https://static.packt-cdn.com/downloads/9781801077880_ ColorImages.pdf
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "The newest version of Apollo Client comes with the useQuery Hook."
xvi Preface
A block of code is set as follows:
if (loading) return 'Loading...'; if (error) return 'Error! ${error.message}';
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
mkdir src/client/apollo touch src/client/apollo/index.js
Any command-line input or output is written as follows:
mkdir src/client/components
Bold : Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "In the top bar, you will find the Prettify button, which tidies your query so that it is more readable."
Tips or Important Notes Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback : If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata : Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy : If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author : If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Section 1:
Building the Stack
Each journey starts with a first step. Our first step will be to take a look at how to get the basic setup with Node.js, React, MySQL, and GraphQL running. Knowing how to build such a setup yourself and how the different technologies work together is very important to understand more advanced topics later in the book.
In this section, there are the following chapters:
- Chapter 1, Preparing Your Development Environment
- Chapter 2, Setting Up GraphQL with Express.js
- Chapter 3, Connecting to the Database
