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.
Table of Contents (16 chapters)
1
Part 1: Setting Up the Development Environment, GraphQL Server, and Database
7
Part 2: Building the Angular Frontend with Realtime Support
13
Part 3: Adding Realtime Support

What this book covers

Chapter 1, App Architecture and Development Environment, teaches you about the project's structure and the tools required to develop the application. After that, you'll have your machine ready for development. Specifically, you'll install Node.js alongside npm and MySQL.

Chapter 2, Setting Up GraphQL with Node.js, Express.js, and Apollo, assists you with building your backend application to provide the API that will be consumed by your Angular application.

Chapter 3, Connecting the Database with TypeORM, teaches you how to connect a MySQL database to your application using TypeORM, as well as how to create resolvers to get and save data from the database.

Chapter 4, Implementing Authentication and Image Uploads with Apollo Server, helps you understand how to add authentication and image uploads with Apollo Server to your GraphQL API, implementing more resolvers. You'll learn about the necessary concepts for adding authentication with Node.js, Express, and Apollo Server and then how to handle image uploads.

Chapter 5, Adding Realtime Support with Apollo Server, helps you to add realtime support to your server application, which will allow you to communicate fresh data from the server to the client as soon as it becomes available. To do this, you'll use Apollo Server's GraphQL subscriptions.

Chapter 6, Angular Application Architecture and Routing, gets you started by installing the Angular CLI and creating a new project using a recent version of Angular. Following that, you'll utilize the Angular CLI to create the modules, services, and components that make up your application's UI, as well as being introduced to dependency injection.

Chapter 7, Adding User Search Functionality, specifically looks at how to integrate the frontend with the backend using Apollo Client, which is designed for sending GraphQL queries and mutations to the server to fetch and write data. Then, you'll begin implementing authentication.

Chapter 8, Guarding Routes and Testing Authentication, continues with implementing our authentication system by guarding the necessary route(s) from unauthorized access, sending the JWT with API requests, and unit testing our code.

Chapter 9, Uploading Images and Adding Posts, implements the profile component's functionality. You'll add the necessary code to fetch the user that corresponds to a profile URL and render their information on the page, including the ability to upload the user's photo and cover image as well as add a biography.

Chapter 10, Fetching Posts and Adding Comments and Likes, begins by dealing with an authentication token expiration issue, and then you'll continue working on your profile component by sending queries to receive paginated posts and comments data and mutations to add comments and likes to posts.

Chapter 11, Implementing GraphQL Subscriptions, continues with building your users' profile component before learning how to add realtime support to your application so that you can retrieve and display new data from the server without having to constantly refresh the app. You'll utilize GraphQL subscriptions with Apollo Client and Angular to do this.