In this article, I will show you how to run GraphQL mutations and authentication flows in Angular using Apollo Angular client.

GraphQL is a  specification that defines a type system, query language, and schema language for building web APIs. The specification is language agnostic, but in this article you will use a GraphQL API built in JavaScript to build an Angular app that will communicate with the API. We will be working with  Apollo Angular, which is an Apollo client integration for Angular. It allows you to query any GraphQL server and build reactive UI using the Angular framework.

What We’ll Build

We will build an Angular app that can query for and create books. To be precise, we will focus on GraphQL mutation operations by using the mutation API from the Apollo service and how to configure Apollo client to provide authentication credentials when sending the queries.

We will be using an already-built GraphQL server, which you can download on GitHub. Follow the setup instructions to set it up and start it.

Prerequisite

This article assumes some knowledge of GraphQL, Angular, and how to work with the Angular CLI. If you’re not familiar with those, I’ve got you covered! I have recently written about the  fundamental GraphQL concepts and how to build a GraphQL API. It’ll work you through the specification and the query language. I’ve also written about  Angular and how to use the CLI. If you’re comfortable with those, you can continue reading

#angular #graphql