Full Stack Development with Angular and GraphQL

Learn to build scalable monorepo and a complete Angular app using Apollo, Lerna, and GraphQL

Build a small social network with Angular and GraphQL. Use tools such as Lerna and GraphQL Code Generator to build a scalable web app and leverage Apollo Client’s reactive variables to easily manage the local state of your app.

Key Features

  • Utilize Angular modules and components to create scalable and maintainable applications in the future.
  • Utilize Node.js, Express, and Apollo Server to create a GraphQL API for a tiny social networking application.
  • Utilize Apollo Client to link Angular with a GraphQL server and control the local state of your application.
  • Organize your project following a mono-repo architecture with tools such as Lerna and NPM workspaces.
  • Build a GraphQL schema for a social network app.
  • Build An Angular frontend styled with Material design components for a social network application.

Book Description

Today’s web app developers love Angular because it allows them to create apps, reuse code, and target any number of different deployment scenarios. GraphQL is a contemporary and REST alternative for querying APIs on the web. In this book will take benefit of a scalable and future-proof stack for creating a social network app using Angular, TypeScript, and GraphQL.

This book teaches you how to use cutting-edge technologies to create web applications. You’ll learn how to use Lerna, Angular, GraphQL and Apollo to solve common web development problems like database access, user authentication, and image uploads.

Angular and GraphQL are introduced at the beginning of the book. Using Lerna and NPM Workspaces, you’ll establish a monorepo project and set up a Node.js app to work with GraphQL using Express and Apollo. Angular architecture and routing will be then explained. To access data from the built GraphQL API, the book shows how to use Apollo Client to connect to the server and develop a professional-looking UI using Angular Material.

You’ll discover Apollo Client’s type and field policies, as well as several fetching policies. In addition, you’ll learn about Apollo Client’s local state management and reactive variables, as well as how to use GraphQL Code Generator to generate TypeScript types and even Angular Apollo services for your GraphQL schema and queries in order to implement a scalable codebase.

By the conclusion of this book, you’ll have the knowledge and abilities required to create your own full stack application.

What you will learn

  • Build a monorepo project with Lerna and NPM workspaces
  • Implement realtime support with GraphQL subscriptions
  • Develop a frontend with a modular architecture and Material Design UI components to consume the GraphQL API
  • Utilize GraphQL Code Generator to generate types and code for a type-safe and scalable code base
  • Utilize Angular modules and smart and dumb components and share data between them
  • Utilize 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 intended for Angular developers interested in learning how to utilize GraphQL and Apollo in conjunction with Angular to create full-stack apps. This book makes no presumptions about past experience with full-stack development using 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