Full Stack Development with Angular and GraphQL

Full Stack Development with Angular and GraphQL

by Ahmed Bouchefra
Released March 2022
Publisher(s): Packt Publishing
ISBN: 9781800202467

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Design and develop full-stack and cross-platform Angular applications using the latest web tooling, development techniques, and modern app architecture

Key Features

  • Implement scalability and maintainability to your full stack apps using Angular modules and components
  • Get the complete source code of the example social network app built using GraphQL and Apollo
  • Manage your Angular applications state using Apollo client for a seamless user experience

Book Description

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.

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

The book is aimed at Angular developers who wish to learn about GraphQL for taking their frontend knowledge in full stack web development. The book assumes intermediate knowledge of Angular, however, full stack development is not required.

Table of contents

  1. Full Stack Development with Angular and GraphQL
  2. Contributors
  3. About the author
  4. About the reviewer
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Part 1: Setting Up the Development Environment, GraphQL Server, and Database
  7. Chapter 1: App Architecture and Development Environment
    1. Technical requirements
    2. The architecture and technologies
      1. Full-stack architecture
      2. The development technologies
      3. Running JavaScript on the server with Node.js
      4. Installing packages with npm
      5. Running a web server with Express.js
      6. GraphQL
      7. Integrating the frontend and backend with Apollo
      8. Saving data with TypeORM and MySQL
      9. Building the frontend with TypeScript and Angular
    3. Installing MySQL
      1. Configuring MySQL Server
      2. Testing MySQL Server
    4. Installing and configuring Node.js
      1. Installing Node.js with nvm
    5. Summary
  8. Chapter 2: Setting Up GraphQL with Node.js, Express.js, and Apollo
    1. Technical requirements
    2. Setting up a monorepo project
    3. Initializing our server project
      1. Generating a package.json file
      2. Installing Express.js and development dependencies
      3. Creating the server
      4. Watching and recompiling our code
    4. Creating a GraphQL API
      1. Installing the necessary libraries
      2. Exposing a simple GraphQL API
      3. Sending queries with Apollo Studio
      4. Creating a GraphQL schema for our social network
      5. Mocking our GraphQL API
      6. Linking the mocked data
    5. Configuring CORS
    6. Summary
  9. Chapter 3: Connecting the Database with TypeORM
    1. Technical requirements
    2. Creating a MySQL user and database
    3. Setting up TypeORM and MySQL
    4. Creating TypeORM entities
    5. Seeding test data
    6. Using Apollo with TypeORM
    7. Summary
  10. Chapter 4: Implementing Authentication and Image Uploads with Apollo Server
    1. Technical requirements
    2. What's JWT?
    3. Implementing authentication
    4. Protecting GraphQL queries and mutations
    5. Implementing image uploads
      1. Assignments
    6. Summary
  11. Chapter 5: Adding Realtime Support with Apollo Server
    1. Technical requirements
    2. Understanding GraphQL subscriptions
    3. Implementing GraphQL subscriptions
    4. Implementing JWT authentication with subscriptions
    5. Summary
  12. Part 2: Building the Angular Frontend with Realtime Support
  13. Chapter 6: Angular Application Architecture and Routing
    1. Technical requirements
    2. Installing the Angular CLI
      1. Angular CLI commands
    3. Initializing the Angular project
    4. Understanding the application architecture
      1. What's a module?
      2. What's a component?
    5. Understanding services and dependency injection
    6. Creating modules, services, and components
      1. Creating modules
      2. Creating components and services
    7. Understanding Angular routing
      1. How the Angular Router works
      2. The <base href> tag
      3. The routing modules
      4. The router outlet
      5. Importing the routing module
    8. Understanding and adding routes
      1. Route-matching strategies
      2. Route parameters
      3. Adding routes
    9. Adding navigation
    10. Debugging Angular applications
    11. Adding Angular Material
    12. Summary
  14. Chapter 7: Adding User Search Functionality
    1. Technical requirements
    2. Introducing and installing Apollo Client
    3. Importing Angular Material components
    4. Signing up and logging users in
      1. Defining GraphQL documents
      2. Defining types for user authentication
      3. Defining Apollo services
      4. Implementing the user authentication service
      5. Building and styling the signup UI
      6. Building and styling the login UI (assignment)
      7. Implementing the header component
      8. Implementing the footer and page not found components
      9. Implementing the user search dialog component
    5. Summary
  15. Chapter 8: Guarding Routes and Testing Authentication
    1. Technical requirements
    2. Guarding routes
      1. Sending the JWT
      2. Improving the search functionality (assignment)
      3. Using GraphQL fragments
      4. Local state management with Apollo Client
      5. Using the OnPush change detection strategy
    3. Testing the auth service and component(s)
      1. Testing the auth service
      2. Testing the auth guard
      3. Testing the header component
      4. Testing the search dialog component
      5. Testing other components
    4. Summary
  16. Chapter 9: Uploading Images and Adding Posts
    1. Technical requirements
    2. Image uploading with Angular and Apollo
      1. Setting up GraphQL Code Generator
      2. Adding fragments and mutations
      3. Generating types and services
    3. Implementing the post service
    4. Implementing the profile service
    5. Implementing the base component
    6. Implementing the profile component
      1. Defining field policies
    7. Creating the profile UI
      1. Styling the profile component
    8. Implementing the create post component
      1. Testing
    9. Summary
  17. Chapter 10: Fetching Posts and Adding Comments and Likes
    1. Technical requirements
    2. Improving the authentication system
    3. Adding queries and generating types and services
    4. Fetching paginated posts
    5. Implementing comments and likes services
    6. Implementing a presentational post component
    7. Displaying posts, comments, and likes
    8. Summary
  18. Part 3: Adding Realtime Support
  19. Chapter 11: Implementing GraphQL Subscriptions
    1. Technical requirements
    2. Persisting the component state with reactive variables
    3. Using field policies to rewrite dates
    4. Displaying comments
      1. Displaying new comments
      2. Updating the cache after removing comments
      3. Giving focus to the commenting box
    5. Setting up Apollo Client for subscriptions
    6. Implementing GraphQL subscriptions
    7. Summary
    8. Why subscribe?
  20. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts

Product information

  • Title: Full Stack Development with Angular and GraphQL
  • Author(s): Ahmed Bouchefra
  • Release date: March 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781800202467