O'Reilly logo
live online training icon Live Online training

Creating Angular Applications with GraphQL

Topic: Web Platform
Tamas Piros

Just as Angular has transformed the way developers build web applications via an opinionated way, GraphQL is an emerging technology that changes how they build APIs to query and mutate data. With GraphQL developers can query the exact data required by a page, or an application, and therefore it does not load an excessive amount of data. GraphQL can be used in any web or mobile application. In this training, you will get up and running with GraphQL and discover the core knowledge needed to create an application using Angular and GraphQL. (Please note that throughout this workshop we’ll be using Angular Apollo and Apollo GraphQL, as well as Angular version 8)

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand how to:

  • Implement a more advanced application that uses Angular 8 to work with GraphQL.
  • Think about your applications data in terms of a graph structure.
  • Utilise media optimisation via GraphQL.

And you’ll be able to:

  • Run GraphQL queries in an Angular context
  • Create custom types for GraphQL
  • Manage media via a third-party service and GraphQL

This training course is for you because...

  • You’re a front-end or developer who wants to apply GraphQL concepts to an Angular App.
  • You are a web developer, who already works with Angular, and are new to GraphQL.
  • You’d like to know how to remove excessive data from your application.
  • Interested in how to specify the exact data structure to be returned from an API.


  • Basic Angular knowledge (components, routing, TypeScript)
  • Basic understanding of API design (RESTful APIs)
  • Basic GraphQL understanding (Queries, DataTypes, Basic Mutations)

Recommended preparation:

Must Have:

Recommended follow-up:

About your instructor

  • Tamas Piros is a director at Full Stack Training and a web developer turned technical instructor, curriculum developer, developer evangelist, and Google Developer Expert in web technologies. He has more than a decade of experience working with large, prestigious organizations. He’s delivered training classes for clients and regularly conducts presentations and workshops at conferences and meetups all over the world.


The timeframes are only estimates and may vary according to how the class is progressing

Introduction and Setup: Overview of the App architecture (Angular and GraphQL) (20 minutes)

  • Presentation
  • Q&A

Getting started with Apollo GraphQL (Server Side) (25 minutes)

  • Presentation & hands-on demonstration: Adding Apollo GraphQL server
  • Exercise
  • Q&A
  • 5 min BREAK

Getting started with Apollo GraphQL (Client Side) (20 minutes)

  • Presentation & hands-on demonstration: Adding Apollo Client to Angular
  • Exercise

Applying GraphQL to Angular (30 minutes)

  • Presentation & hands-on demonstration: GraphQL client in an Angular application
  • Exercise
  • Q&A
  • 5 min. BREAK

Create, Update and Delete (40 minutes)

  • Presentation & hands-on demonstration: Using CRUD operations in a GraphQL context
  • Exercise
  • Q&A
  • 5 min. BREAK

Managing media via Custom Data Types in GraphQL (30 minutes)

  • Presentation & hands-on demonstration: Uploading Images
  • Presentation & hands-on demonstration: Create a custom data type to manage media (image) resources
  • Presentation: display media (image) resources via GraphQL
  • Exercise