Book Image

Full Stack Development with Angular and GraphQL

By : Ahmed Bouchefra
Book Image

Full Stack Development with Angular and GraphQL

By: Ahmed Bouchefra

Overview of this book

GraphQL is an alternative to traditional REST technology for querying Web APIs. Together with Angular and TypeScript, it provides a tech stack option for building future-proof web applications that are robust and maintainable at any scale. This book leverages the potential of cutting-edge technologies like GraphQL and Apollo and helps Angular developers add it to their stack. Starting with introducing full-stack development, you will learn to create a monorepo project with Lerna and NPM Workspaces. You will then learn to configure Node.js-based backend using GraphQL, Express, and Apollo Server. The book will demonstrate how to build professional-looking UIs with Angular Material. It will then show you how to create Web APIs for your frontend with GraphQL. All this in a step-by-step manner. The book covers advanced topics such as local state management, reactive variables, and generating TypeScript types using the GraphQL scheme to develop a scalable codebase. By the end of this book, you'll have the skills you need to be able to build your full-stack application.

Related Content you might be interested in

Current Title:

Small book image
Full Stack Development with Angular and GraphQL
Ahmed Bouchefra
Mar, 2022 | 390 pages
Small book image
Full-Stack Web Development with GraphQL and React
Sebastian Grebe
Feb, 2022 | 472 pages
Small book image
Hands-On Full-Stack Web Development with GraphQL and React.
Sebastian Grebe
Jan, 2019 | 460 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Feb, 2023 | 446 pages
Table of Contents (16 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1: Setting Up the Development Environment, GraphQL Server, and Database
Part 1: Setting Up the Development Environment, GraphQL Server, and Database
Free Chapter
2
Chapter 1: App Architecture and Development Environment
Chapter 1: App Architecture and Development Environment
Technical requirements
The architecture and technologies
Installing MySQL
Installing and configuring Node.js
Summary
3
Chapter 2: Setting Up GraphQL with Node.js, Express.js, and Apollo
Chapter 2: Setting Up GraphQL with Node.js, Express.js, and Apollo
Technical requirements
Setting up a monorepo project
Initializing our server project
Creating a GraphQL API
Configuring CORS
Summary
4
Chapter 3: Connecting the Database with TypeORM
Chapter 3: Connecting the Database with TypeORM
Technical requirements
Creating a MySQL user and database
Setting up TypeORM and MySQL
Creating TypeORM entities
Seeding test data
Using Apollo with TypeORM
Summary
5
Chapter 4: Implementing Authentication and Image Uploads with Apollo Server
Chapter 4: Implementing Authentication and Image Uploads with Apollo Server
Technical requirements
What's JWT?
Implementing authentication
Protecting GraphQL queries and mutations
Implementing image uploads
Summary
6
Chapter 5: Adding Realtime Support with Apollo Server
Chapter 5: Adding Realtime Support with Apollo Server
Technical requirements
Understanding GraphQL subscriptions
Implementing GraphQL subscriptions
Implementing JWT authentication with subscriptions
Summary
7
Part 2: Building the Angular Frontend with Realtime Support
Part 2: Building the Angular Frontend with Realtime Support
8
Chapter 6: Angular Application Architecture and Routing
Chapter 6: Angular Application Architecture and Routing
Technical requirements
Installing the Angular CLI
Initializing the Angular project
Understanding the application architecture
Understanding services and dependency injection
Creating modules, services, and components
Understanding Angular routing
Understanding and adding routes
Adding navigation
Debugging Angular applications
Adding Angular Material
Summary
9
Chapter 7: Adding User Search Functionality
Chapter 7: Adding User Search Functionality
Technical requirements
Introducing and installing Apollo Client
Importing Angular Material components
Signing up and logging users in
Summary
10
Chapter 8: Guarding Routes and Testing Authentication
Chapter 8: Guarding Routes and Testing Authentication
Technical requirements
Guarding routes
Testing the auth service and component(s)
Summary
11
Chapter 9: Uploading Images and Adding Posts
Chapter 9: Uploading Images and Adding Posts
Technical requirements
Image uploading with Angular and Apollo
Implementing the post service
Implementing the profile service
Implementing the base component
Implementing the profile component
Creating the profile UI
Implementing the create post component
Summary
12
Chapter 10: Fetching Posts and Adding Comments and Likes
Chapter 10: Fetching Posts and Adding Comments and Likes
Technical requirements
Improving the authentication system
Adding queries and generating types and services
Fetching paginated posts
Implementing comments and likes services
Implementing a presentational post component
Displaying posts, comments, and likes
Summary
13
Part 3: Adding Realtime Support
Part 3: Adding Realtime Support
14
Chapter 11: Implementing GraphQL Subscriptions
Chapter 11: Implementing GraphQL Subscriptions
Technical requirements
Persisting the component state with reactive variables
Using field policies to rewrite dates
Displaying comments
Setting up Apollo Client for subscriptions
Implementing GraphQL subscriptions
Summary
Why subscribe?
15
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts

Creating the profile UI

Let's build the profile UI after we've implemented the component's methods:

  1. Start by adding the following HTML markup to the users/components/profile/profile.component.html file:
    <mat-card class="profile-cover-card">
<mat-card-content *ngIf="profileUser">
  <div class="profile-cover" [ngStyle]="
    {'background-image': profileUser.coverImage }">
  </div>
  <img class="profile-image" src="{{ profileUser.image 
    }}">
</mat-card-content>
</mat-card>

To display the profile cover and image, we use a Material Card component. We use the ngStyle directive to set the CSS background-image property to the URL of the profileUser cover photo, and we show the user's photo via interpolation using the element's src attribute.

  1. Just below the previous...
Previous Section
End of Section 8
Next Section