Consuming GraphQL APIs in ASP.NET Core

0
21

In my previous post, Building GraphQL APIs in ASP.NET Core, we learned how to build a GraphQL server in ASP.NET Core using the Hot Chocolate library and Entity Framework Core and expose API endpoints to perform CRUD operations. In this post, I will show you how to consume the GraphQL APIs in the ASP.NET Core web application.

Initial Project Setup

Open Visual Studio 2022 and create a blank solution with the name ConsumeGraphQLIInAspNetCore. I will create the following two projects in this solution.

AspNetCoreGraphQLServer

The GraphQL Server project exposes the GraphQL API endpoints to be consumed by the client applications. I will not show you how to build the GraphQL server because I already covered this topic in greater detail in my previous posts Building GraphQL APIs in ASP.NET Core and Getting Started with GraphQL in ASP.NET Core. You can build a server by following these posts and make sure your server is up and running and you can see the GraphQL query results in the browser as follows:

AspNetCoreGraphQLClient

This project will consume the APIs exposed by the GraphQL APIs exposed by the AspNetCoreGraphQLServer application. There are several GraphQL client libraries available for almost all popular programming languages ​​but I will use the library called GraphQL.Client to simplify building GraphQL client application in C#.

Building GraphQL Client Application in ASP.NET Core

We are now ready to start building the GraphQL client application in ASP.NET Core. Before we start actual coding, we need to download and install the following libraries using the NuGet package manager.

Next, we need to configure the GraphQL server endpoint in the appsettings.json file as follows:

appsettings.json

  "GraphQLServerUri": "http://localhost:5043/graphql",
  "Logging": 
    "LogLevel": 
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    
  ,
  "AllowedHosts": "*"

Next, we need to register GraphQLHttpClient with the ASP.NET Core dependency injection container in Program.cs file as follows. Notice, how we are reading the GraphQLServerUri from the appsettings.json file to initialize the EndPoint property of GraphQLHttpClientOptions.

Program.cs

builder.Services.AddScoped<IGraphQLClient>(s => 
    new GraphQLHttpClient(new GraphQLHttpClientOptions()
        
            EndPoint = new Uri(builder.Configuration["GraphQLServerUri"])            
        ,
        new NewtonsoftJsonSerializer()));

Once the GraphQLHttpClient is registered, we can inject it into any ASP.NET Core Controller or Razor Page and start writing GraphQL queries and mutations but I always like to keep my controllers and pages as lightweight as possible so I will create a separate service class that will contain GraphQL queries and mutations.

Implementing GraphQL Client Services

Create a Services folder in the AspNetCoreGraphQLClient project and add the following IPlayerService interface in the folder.

IPlayerService.cs

public interface IPlayerService

    Task<IEnumerable<Player>> GetAllPlayersAsync();

Next, create a PlayerService class in the Services folder that will implement the above IPlayerService interface and will provide the implementation of the GetAllPlayersAsync method.

PlayerService.cs

public class PlayerService : IPlayerService
{
    private readonly IGraphQLClient _client;

    public PlayerService(IGraphQLClient client)
    
        _client = client;
    

    public async Task<IEnumerable<Player>> GetAllPlayersAsync()
    
        var request = new GraphQLRequest
        
            Query = @"
            
                players 
                    id
                    name,
                    shirtNo,
                    appearances,
                    goals
                
            "
        ;

        var response =  await _client.SendQueryAsync<PlayersResponseType>(request);
        return response.Data.Players;
    
}

In the above class:

We are injecting the IGraphQLClient object in the constructor and the ASP.NET Core dependency injection system will automatically inject the GraphQLHttpClient class object because we already registered this object in Program.cs file. GraphQLHttpClient has several methods that can be used to make API calls to GraphQL endpoints.

private readonly IGraphQLClient _client;

public PlayerService(IGraphQLClient client)

    _client = client;

We are then creating an object of GraphQLRequest class and initializing it Query property with the string that represents the GraphQL query we want to execute from the client. We can specify the fields eg id, name, etc. as per client requirement.

var request = new GraphQLRequest

    Query = @"
    
        players 
            id
            name,
            shirtNo,
            appearances,
            goals
        
    "
;

We are then calling the SendQueryAsync method that accepts a response type as a generic parameter. For our query, we passed the PlayersResponseType object which we will implement shortly.

var response =  await _client.SendQueryAsync<PlayersResponseType>(request);

Finally, we are returning all the players we received from the server as an IEnumerable object.

return response.Data.Players;

We can now register our service in Program.cs file as follows:

builder.Services.AddScoped<IPlayerService, PlayerService>();

Creating Model Classes

In the above PlayerService class, we used some classes eg Player, PlayersResponseType, etc. Let’s implement those classes inside a Models folder of the project.

Player.cs

public partial class Player

    public int Id  get; set; 
    public int? ShirtNo  get; set; 
    public string? Name  get; set; 
    public int? PositionId  get; set; 
    public int? Appearances  get; set; 
    public int? Goals  get; set;  

PlayersResponseType.cs

public class PlayersResponseType

    public List<Player> Players  get; set; 

Running GraphQL Queries from ASP.NET Core

Let’s create an ASP.NET Core Razor Page Index.cshtml to quickly test our PlayerService class. The page code behind class will inject IPlayerService through the constructor and will call the GetAllPlayersAsync method of the PlayserService class to initialize a local Players property.

Index.cshtml.cs

public class IndexModel : PageModel

    private readonly IPlayerService _playerService;

    public IEnumerable<Player>? Players  get; set; 

    public IndexModel(IPlayerService playerService)
    
        _playerService = playerService;
    

    public async Task<IActionResult> OnGetAsync()
    
        Players = await _playerService.GetAllPlayersAsync();
        return Page();
    

The razor view will contain a simple HTML table that will iterate over the players and display the player’s information received from the GraphQL server endpoint.

Index.cshtml

@page
@model IndexModel
@
    ViewData["Title"] = "Players";


<div>
    <h3>Players List</h3>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Shirt No</th>
                <th>Appearances</th>
                <th>Goals</th>
            </tr>
        </thead>
        <tbody>
        @if (Model.Players != null)
        
            foreach (var player in Model.Players)
            
                <tr>
                    <td> @player.Id </td>
                    <td> @player.Name </td> 
                    <td> @player.ShirtNo </td> 
                    <td> @player.Appearances </td> 
                    <td> @player.Goals </td> 
                </tr>
            
        
        </tbody>
    </table>
</div>

Before you run both client and server applications, make sure both projects are set as the startup project in Visual Studio. This is important because we want our GraphQL server application up and running when the GraphQL client application is making API calls. For this task, you need to open Set Startup Projects… dialog from the Project menu.

Multiple Startup Projects in Visual Studio 2022

In the dialog, you need to select both AspNetCoreGraphQLServer and AspNetCoreGraphQLClient projects in the Multiple startup projects section.

Start GraphQL Server and Client in Parallel

Press F5 to run both server and client applications in parallel and you should see the client application showing the player’s information as shown in the screenshot below.

Displaying Data from GraphQL API Endpoint

Summary

In this post, we learned how to prepare a GraphQL client application in ASP.NET Core application using GraphQL.Client library and how to consume GraphQL APIs exposed by the servers. The complete source code including both AspNetCoreGraphQLServer and AspNetCoreGraphQLClient projects are available on GitHub so you can download and play with the code. If you have any comments or suggestions, please leave your comments below. Don’t forget to share this tutorial with your friends or community.

.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here