In the previous article, we have created an ASP.NET Core application to consume a GraphQL API. But we don’t have to use only ASP.NET Core app to consume a GraphQL API, we can do the same thing with the Angular application. To accomplish that, we are going to use the Apollo library which will help us in the process.

We won’t dive deep into the Angular project development, for that, we have a great Angular Tutorial on that subject as well.

To download the source code, visit the Consuming a GraphQL API with Angular Source Code.

For the complete navigation of this tutorial visit GraphQL ASP.NET Core Tutorial.

We are going to divide this article into the following sections:

Preparing the Angular Project

After we have finished with the ASP.NET Core client app, let’s create an Angular app as well.

We are going to start by creating a new Angular project without navigation module and with CSS as default styles. As soon as creation is over, we are going to install a set of libraries required for the Apollo Client to work with Angular:

The next step is to modify app.module.ts file:

We import the ApolloModule and HttpLinkModule files, required for the Appolo integration with Angular. But, we can see that HttpClientModule is included as well. That’s because in order to work properly, HttpLinkModule internally uses HttpClientModule.

Let’s move on.

In the same way that we created model files for the ASP.NET Core client application, we are going to create them here.

So, let’s create a new folder „types“ and inside several type files:

Now, we can create a graphql.service.ts file and modify it as well:

We have an instance of the Apollo service with all the required configuration (link and cache). Both properties are required and must be populated.

After these configuration actions, we are ready to create some queries.

Creating Queries and Mutations

Let’s modify the graphql.service.ts file, by adding our first query:

We are using the Apollo service with its query function to write the entire GraphQL query. We’re using the imported gql tag as well, in order to be able to write GraphQL code as a multi-line string.

Now, let’s modify the app.component.ts file in order to test this query:

As soon as we start the Angular application, we can inspect the result:

Angular GraphQL Query Result - Using Angular To Consume GraphQL API

Excellent.

Here are all the other queries and mutations from the graphql.service.ts file:

You can test them by modifying the app.component.ts file, or if you want to create a new component to consume all these results.

Conclusion

So, there we go. We have learned a lot of great stuff about GraphQL and its integration with ASP.NET Core. Of course, with these last two articles, we went even further, by creating two client applications to consume our GraphQL app.

We hope you have enjoyed this tutorial and if you have any suggestions or question, don’t hesitate to leave a comment in the comment section.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published .NET Core content we encourage you to subscribe to our blog.