Full Stack Development with Angular and GraphQL

Use tools such as Lerna and GraphQL Code Generator to leverage recent features like NPM Workspaces for configuring a mono-repo project and Apollo Client's reactive variables to easily manage the local state of your app

Key Features

• Use Angular modules and components to build apps that you can easily scale and maintain in the future
• Develop a GraphQL API for a small social network app using Node.js, Express, and Apollo Server
• Use Apollo Client to integrate Angular with a GraphQL server and manage your application's local state

Book Description

Angular is one of the most popular JavaScript frameworks in modern web app development allowing developers to not only build apps and reuse the code but also develop apps for any deployment target. For web, mobile web, native mobile, and native desktop, GraphQL is the modern and REST alternative for querying web APIs. Using Angular, TypeScript and GraphQL will give you a future-proof and scalable stack you can start building apps around.

This book shows you how to build apps using cutting-edge technologies. You'll learn how to solve common web development problems with GraphQL and Apollo, such as database access, authentication, and image uploads.

The book starts by introducing you to building full stack apps with Angular and GraphQL. Next, you'll learn how to create a monorepo project with Lerna and NPM Workspaces and configure a Node.js app to use GraphQL with Express and Apollo Server. You'll also understand the basics of Angular architecture and routing. Later, the book demonstrates how to build a professionally-looking UI with Angular Material, use Apollo Client to interface with the server to get data from the built GraphQL API.

You'll learn about Apollo Client's type and field policies, and various fetching policies. In addition to this, you'll learn about local state management and reactive variables with Apollo Client and how to generate TypeScript types and even Angular Apollo services for your GraphQL schema and queries using GraphQL Code Generator to implement a scalable codebase.

By the end of this book, you'll have the skills you need to be able to build your own full stack application.

What you will learn

• Create a monorepo project with Lerna and NPM workspaces
• Add realtime support with GraphQL subscriptions
• Build a frontend with a modular architecture and Material Design UI components to consume the GraphQL API
• Use GraphQL Code Generator to generate types and code for a type-safe and scalable code base
• Create Angular modules and smart and dumb components and share data between them
• Use Apollo Client features such as client-side queries and reactive variables for local state management

Who this book is for

This Angular GraphQL book is for Angular developers who want to learn how to use GraphQL and Apollo with Angular to build full-stack applications. This book does not assume prior knowledge of full-stack development with Angular and GraphQL.

Table of Contents

1. App Architecture and Development Environment
2. Setting Up GraphQL with Node.js, Express.js, and Apollo
3. Connecting the Database with TypeORM
4. Implementing Authentication and Image Uploads with Apollo Server and Node.js
5. Adding Realtime Support with Apollo Server
6. Angular Application Architecture and Routing
7. Adding User Search Functionality
8. Guarding Routes and Testing Authentication
9. Uploading Images and Adding Posts
10. Fetching Posts and Adding Comments and Likes
11. Implementing GraphQL Subscriptions

Ahmed Bouchefra is a software developer and technical author with an engineering degree in software development. He is an expert in web development using modern technologies such as Angular and Node.js, along with using traditional technologies such as Python and Django. He's an open-source, developer, and maintainer of multiple open source Angular libraries, such as ngx-qrcode2. He also currently writes tutorials about modern web development on techiediaries and other industry-leading websites.