GraphQL with Angular for beginners

Name: GraphQL with Angular for beginners
Rating: 4.9 (32 reviews)

GraphQL with Angular: Build Frontend Apps with GraphQL from Scratch (without REST)

Highest Rated

Created byDiscover Programming

Last updated 1/2026

English

What you'll learn

introduction to GraphQL
using HttpClient for communicating with a GraphQL API
using Apollo Client for communicating with a GraphQL API
GraphQL schema
queries and mutations to retrieve and modify data from the backend
managing application state and data flow using Apollo's caching
changing manually cache state
error handling with graphql
build frontend CRUD app with GraphQL from scratch
making subscriptions

Course content

8 sections • 56 lectures • 3h 37m total length

What is GraphQL?2:04
GraphQL vs REST4:45
GraphQL unifies data requests into a single endpoint, avoiding overfetching and underfetching. It replaces multiple REST calls with queries and mutations, enabling precise, efficient data shaping and built-in introspection.

Installing Node.js3:43
Node.js "File ... cannot be loaded..." fix0:40
Installing Angular CLI1:53
Creating a new Angular project1:55
IDE / code editor0:17
First run of the project2:22
Setting up a fake GraphQL server with json-graphql-server3:27
Intro to using json-graphql-server3:57
Installing primeng in Angular project3:53
install the PrimeNG library to access ready-to-use UI components, including a fully styled data table, and follow the installation guide to configure providers and verify with a p-button.
Adding environment files with url to api1:44

First query with apollo-angular (watchQuery)3:49
Using p-table to show all posts4:00
Quick note about loading state0:13
Handling query loading state3:17
Loading property with useInitialLoading set to true6:04
query method vs watchQuery1:11
Using query instead of watchQuery2:07
Managing watchQuery QueryRef and subscription2:40
Learn to manage watchQuery by recognizing it returns a QueryRef and does not unsubscribe, leading to memory leaks; store the result in postsQuery, track the sub, and unsubscribe in ngOnDestroy.
Polling (periodically execution of query)4:55
Programmatically starting/stoping polling0:59
Refetching2:50
Fetching single post3:53
Variables in watchQuery/query2:19
Query typing4:39
QueryRef typing1:56
Improve type safety in Angular GraphQL queries by typing QueryRef with a GetPosts type, enabling precise intellisense, and ensuring correct data structure for all posts.
Refactoring queries and types3:53
Refactor your Angular app by moving post queries and types into dedicated GraphQL files (posts.queries.ts and posts.types.ts), export them, and update imports to keep the posts-table component focused.
Fragments explanation1:16
Creating fragment in project3:27
Adding headers to request5:00
Setting withCredentials2:53
Fetching count of all posts in database4:33
Pagination - wrong way10:11
Pagination - better solution5:35
Learn how to implement efficient pagination in GraphQL with Angular by initializing a single QueryRef in ngOnInit, using fetchMore for updated pages, and configuring type policies for correct cache merging.

Adding primeNG toast component to project2:56
Configure the PrimeNG toast component to display error messages by importing ToastModule and MessageService, adding to providers, and placing the p-toast tag; create a ToastService with showError(message) that uses MessageService.add.
Error policies7:52
Configure errorPolicy in Apollo Angular to manage GraphQL and network errors, using none, ignore, and all, and reveal proper messages via toast notifications.
Global error handler as apollo link4:17
Implement a global error handler in Angular using Apollo Link and onError, logging GraphQL and network errors and displaying toast notifications via a dependency-injected toastService.
Cache explanation1:58
Discover how Apollo Angular's in-memory cache uses normalization and unique identifiers to serve GraphQL data and avoid duplication. Configure caching in app.config.ts or graphql.module.ts with addTypeName, resultCaching, possibleTypes, and typePolicies.
fetch-policy1:27

Mutations with apollo-angular2:49
Deleting post10:17
Deleting post - manually changing cache5:19
Learn to manually update the Apollo cache when deleting a post after a mutation, using update with readQuery and writeQuery for paginated lists, and refetch to keep the interface accurate.
Updating and creating post - preparing mutations5:05
Updating post23:09
Build a dynamic Angular post form using reactive forms, PrimeNG components like p-inputnumber and pInputText, and a BehaviorSubject driven service to create or edit posts.
Creating post5:37
useMutationLoading1:03

Requirements

Basic knowledge of JavaScript
Basic knowledge of Angular framework (nice to have, but not needed)

Description

If your goal is to build Angular applications that communicate with a GraphQL-based server, you're in the right place.
This course does not require prior knowledge of Angular to get started, although some familiarity will certainly make the learning process smoother.

Throughout the course, you'll learn everything you need to effectively use GraphQL in your frontend projects - from understanding the basics of GraphQL queries, mutations, and schemas, to integrating with APIs using both HttpClient and Apollo Client.

We'll also cover how to manage application state with Apollo's cache system, handle errors, and implement real-time updates using subscriptions!
In that course, you'll create a complete CRUD application in Angular that communicates with a GraphQL backend — step by step, from scratch. Course focuses on practical, real-world examples.

All lessons were designed with a beginner-friendly approach in mind, but it’s completely natural to have questions if you haven’t worked with the Angular framework before.

We will be working with Angular version 19, but the examples used in the course have been written in a way that ensures compatibility with older versions of Angular as well.

Don’t worry about that, if you have any questions during the course, don't hesitate to ask in the Q&A section or send me a direct message.
I'm here to help and will gladly assist you with any problems you encounter ; )

Who this course is for:

Developers who want to learn how to use GraphQL with Angular or simply learn GraphQL

GraphQL with Angular for beginners

What you'll learn

Explore related topics

Course content

Introduction of GraphQL2 lectures • 7min

Setup10 lectures • 24min

GraphQL basics2 lectures • 3min

Integrating GraphQL with Angular3 lectures • 16min

Queries, pagination and fragments with apollo-angular23 lectures • 1hr 22min

Error handling, cache5 lectures • 19min

Mutations7 lectures • 53min

Subscriptions4 lectures • 14min

Requirements

Description

Who this course is for: