Integrating GraphQL into Blazor

Learn how to integrate a GraphQL service into a Blazor application with different service queries and Telerik UI for Blazor controls.

In this post, you will learn how to integrate a GraphQL service into your Blazor-based applications by creating a sample CRUD application and using Progress Telerik UI for Blazor components. This will give you a better perspective for handling similar integrations in your own projects. Let’s begin!

Important: All operations performed on the GraphQL service in this exercise are not persistent, so you will receive responses representing their correct execution, but you won’t see the change reflected in the final database.

Creating the Sample Project

To get practical experience with this topic, let’s start by creating a sample project. In the template selector, you need to configure a new solution using the Blazor Web App template. Select the Interactive render mode as Server, the Interactivity location as Global and the Framework as .NET 9.0, as follows:

Next, you need to configure the project to use Telerik UI for Blazor components by following the guide in the official documentation, which will allow us to create quick and aesthetic interfaces.

Easily Generating Data Models

For our sample project, we’ll use the GraphQLZero service, which allows free practice with their API.

Although we could start the project by generating queries manually in text variables, this can be counterproductive in the long run due to multiple reasons:

• The schema definition may change.
• Queries need to be manually searched and updated in strings.
• It’s not typed, which can cause errors.

To solve these issues, we’ll use the GraphQlClientGenerator project. This project is regularly maintained, and they’ve added support for integration with C# 9, allowing data models to be generated in a super simple way.

The process consists of the following steps:

1. Install the GraphQlClientGenerator NuGet package.
2. Open the .csproj file. (You can do this by double-clicking on the project.)
3. Add a new PropertyGroup section with the following information:

<PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net9.0</TargetFramework>

    <!-- GraphQL generator properties -->
    <GraphQlClientGenerator_ServiceUrl>https://graphqlzero.almansi.me/api</GraphQlClientGenerator_ServiceUrl>
    <!-- GraphQlClientGenerator_Namespace is optional; if omitted the first compilation unit namespace will be used -->
    <GraphQlClientGenerator_Namespace>$(RootNamespace)</GraphQlClientGenerator_Namespace>
    <GraphQlClientGenerator_CustomClassMapping>Consumption:ConsumptionEntry|Production:ProductionEntry|RootMutation:TibberMutation|Query:Tibber</GraphQlClientGenerator_CustomClassMapping>
    <GraphQlClientGenerator_IdTypeMapping>String</GraphQlClientGenerator_IdTypeMapping>
    <!-- other GraphQL generator property values -->
</PropertyGroup>

In the code above, you can see that I’ve added the URL pointing to the GraphQL service; you can replace this endpoint with another one to generate models from that endpoint. Similarly, I’ve added GraphQlClientGenerator_IdTypeMapping, which allows modifying how the row id is generated. This is because by default it generates a Guid type, but the service uses numeric identifiers.

4. Modify the existing ItemGroup with the following configuration:

<ItemGroup>
    <PackageReference Include="GraphQL.Client" Version="6.1.0" />
    <PackageReference Include="GraphQL.Client.Serializer.Newtonsoft" Version="6.1.0" />    
    <PackageReference Include="GraphQlClientGenerator" Version="0.9.24" IncludeAssets="analyzers" />
    <PackageReference Include="Telerik.UI.for.Blazor" Version="6.2.0" />
        <CompilerVisibleProperty Include="GraphQlClientGenerator_ServiceUrl" />
        <CompilerVisibleProperty Include="GraphQlClientGenerator_Namespace" />
        <CompilerVisibleProperty Include="GraphQlClientGenerator_IdTypeMapping" />
</ItemGroup>

The code above will install the necessary libraries to work with GraphQL.Client, which will allow us to easily invoke GraphQL services.

Similarly, you can see that I’ve added a couple of CompilerVisibleProperty directives that make MSBuild properties visible to the analyzer during compilation. And, finally, in the GraphQlClientGenerator package reference, I added the IncludeAssets attribute to include the generated analyzers. All this allows for successful compilation and is necessary for entities to be automatically generated.

Once compilation has been performed, if we go to Dependencies | Analyzers | GraphQlClientGenerator | GraphQlClientGenerator.GraphQlClientSourceGenerator | GraphQlClient.cs, we’ll see that within this class, methods and models have been created that will allow us to work with the GraphQL schema in a typed way from C#.

Creating a CRUD Application to Manage Posts

There are multiple ways to work with a GraphQL service, whether using HTTPClient, Strawberry Shake, among others. In our case, we’ll use the GraphQL.Client NuGet package, which is one of the most used and has been installed if you’ve added the package references within ItemGroup. Before creating the first page of the system, we must go to Program.cs and add a singleton instance of GraphQLHttpClientOptions as follows:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddSingleton(provider =>
{
    var options = new GraphQLHttpClientOptions
    {
        EndPoint = new Uri("https://graphqlzero.almansi.me/api")
    };

    return new GraphQLHttpClient(options, new NewtonsoftJsonSerializer());
});

var app = builder.Build();

This will allow us to reuse this instance as specified in the library’s documentation.

Creating a Page to Display Service Data

Let’s start by creating the page to display the existing posts in the database. To do this, we’ll create a new page component called PostList inside the Components folder. Within this page, we’ll take advantage of the power of Telerik controls, defining the graphical interface as follows:

@page "/posts"
@using BlazorGraphQLDemo.Models
@using GraphQL
@using GraphQL.Client.Http
@using GraphQL.Client;
@using GraphQL.Client.Serializer.Newtonsoft
@using Telerik.Blazor.Components
@rendermode InteractiveServer
@inject GraphQLHttpClient HttpClient
@inject NavigationManager Navigationn
@inject IJSRuntime JSRuntime

<h3>Post List</h3>

<TelerikGrid Data="@posts" Pageable="true" PageSize="10" Sortable="true" Groupable="true">
    <GridColumns>
        <GridColumn Field="Id" Title="ID" Width="50px" />
        <GridColumn Field="Title" Title="Title" />
        <GridColumn Field="Body" Title="Body" />
    </GridColumns>
</TelerikGrid>

In the code above, we’ve used a TelerikGrid control to quickly display data in grid form. The Data property expects a variable called posts, which we define in the code section as follows:

@code {
    private List<Post> posts = new List<Post>();        

    protected override async Task OnInitializedAsync()
    {
        await LoadPosts();
    }

    private async Task LoadPosts()
    {
        var builder =
           new QueryQueryBuilder()
             .WithPosts(
               new PostsPageQueryBuilder()
                 .WithData(
                   new PostQueryBuilder()
                     .WithAllScalarFields()));        

        //Generated query:
        // query {
        //     posts {
        //         data {
        //             id
        //             title
        //           body
        //         }
        //     }
        // }

        var query = new GraphQLRequest
            {
                Query = builder.Build()
            };
        
        var response = await HttpClient.SendQueryAsync<PostListData>(query);
        posts = response.Data.Posts.Data;        
    }
}

Let’s describe a bit what happened in the code above. We start by defining the posts variable in which the posts obtained from the service will be stored.

Next, in the OnInitializedAsync method, the LoadPosts method is invoked, within which the typed query that will generate the final query to be executed against the GraphQL service is defined. I’ve placed a comment so you can see the query obtained from that execution.

Then an instance of type GraphQLRequest is created that allows sending requests to the GraphQL service.

And, finally, the request is executed through the SendQueryAsync method, passing the generated query as a parameter, deserializing the response to the PostListData type and assigning the result to posts.

The next step is to create a new folder called Models, within which we’ll create a class called GraphQLResponse as follows:

public class GraphQlResponse
{
    public PostsData Posts { get; set; }
}
public class PostsData
{
    public List<Post> Data { get; set; }
}

Now let’s go to the file located in Components | Layout | NavMenu.razor, which we’ll edit by adding a new element to the menu:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="posts">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Posts
    </NavLink>
</div>

Once we’ve applied the code above, you’ll see the following screen when running the application and navigating to the Posts option in the menu:

It’s amazing how in just a few lines of code we’re displaying information obtained from the service in a clear and presentable way.

Creating New Records

Now that we’ve retrieved all the records and displayed them in a Blazor DataGrid, let’s see how to create a new record. For this, let’s use the TelerikButton and TelerikWindow controls with the purpose of being able to add a new record without leaving the page. We’ll achieve this by adding the following lines to the PostList.razor page:

<TelerikGrid ...>

<TelerikButton OnClick="@ShowCreatePostDialog">Create New Post</TelerikButton>

<TelerikWindow @bind-Visible="@isCreatePostDialogVisible">
    <WindowContent>
        <EditForm Model="@newPost" OnValidSubmit="@CreatePost">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <div>
                <label>Title:</label>
                <InputText @bind-Value="newPost.Title" />
            </div>
            <div>
                <label>Body:</label>
                <InputText @bind-Value="newPost.Body" />
            </div>
            <TelerikButton ButtonType="@ButtonType.Submit">Save</TelerikButton>
            <TelerikButton OnClick="@CloseCreatePostDialog">Cancel</TelerikButton>
        </EditForm>
    </WindowContent>
</TelerikWindow>

On the other hand, let’s add three methods in the code section to handle window visibility, as well as carry out the operation of creating the new record:

@code {
    private bool isCreatePostDialogVisible;
    private Post newPost = new Post();
    ...
    private async Task CreatePost()
    {

        var mutation =
            new MutationQueryBuilder()
                .WithCreatePost(
                    new PostQueryBuilder().WithAllScalarFields(),
                        new CreatePostInput
                            {
                                Body = newPost.Body,
                                Title = newPost.Title
                            }
                )
                .Build(Formatting.Indented, 2);

        //Generated Query:
        // mutation {
        //     createPost(input: { title: "New Title", body: "New Body" }) {
        //         id
        //         title
        //       body
        //     }
        // }

        var request = new GraphQLRequest
            {
                Query = mutation
            };

        var graphQLResponse = await HttpClient.SendMutationAsync<GraphQlResponse>(request);

        posts.Add(graphQLResponse.Data.CreatePost);
        isCreatePostDialogVisible = false;
    }

    private void ShowCreatePostDialog()
    {
        newPost = new Post();
        isCreatePostDialogVisible = true;
    }

    private void CloseCreatePostDialog()
    {
        isCreatePostDialogVisible = false;
    }
}

In the code section above, we created the ShowCreatePostDialog and CloseCreatePostDialog methods as auxiliary methods that allow handling window visibility, while the CreatePost method is responsible for defining a mutation for creating a new post with the information inserted by the user.

Finally, we need to modify the GraphQlResponse class by adding the CreatePost property, since this is the definition returned by the service:

public class GraphQlResponse
{
    public PostsData Posts { get; set; }
    public Post CreatePost { get; set; }
}

When running the application, you’ll see a button below the TelerikGrid control which, when pressed, will show a new window to enter the data for the new post:

Now let’s see how to delete a record.

Deleting a Record

The next functionality we’ll add to the application will be to delete a post from the list. Let’s take advantage of the TelerikGrid control feature that allows adding commands to execute tasks as follows:

<TelerikGrid ...>
    <GridColumns>
        ...
        <GridCommandColumn>            
            <GridCommandButton Command="Delete" OnClick="@DeletePost">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

With the code above, we’ve added a button to the graphical interface that we can link to a custom method to delete a post, which is as follows:

@code{
    ...
    private async Task DeletePost(GridCommandEventArgs args)
    {
        var post = args.Item as Post;

        var idParameter = new GraphQlQueryParameter<string>("id", "ID!", null);

        var mutation =
        new MutationQueryBuilder()
            .WithParameter(idParameter)
            .WithDeletePost(idParameter);

        //Generated Query:
        // mutation($id: ID!) {
        //     deletePost(id: $id)
        // }

        var request = new GraphQLRequest
            {
                Query = mutation.Build(Formatting.Indented, 2),
                Variables = new { id = post.Id }
            };

        if(graphQLResponse.Data.DeletePost)
        {
            posts.Remove(post);
            await JSRuntime.InvokeVoidAsync("alert", $"Post with ID {post.Id} was deleted");
        }        
    }
}

In the code above, the idParameter parameter is defined which we pass as a parameter to the mutation and to the definition of the deletePost operation. You can see the generated query in the commented code. Similarly, during the creation of the GraphQLRequest instance is where the value for the id variable is defined.

Another thing we need to do is define a new class to represent the deletion response as follows:

public class DeleteResponse
{
    public bool DeletePost { get; set; }
}

When running the code above, you can see a new button with the title Delete, which when pressed will delete the post from the list:

Once we have implemented the functionality to delete a post, let’s see how to edit an existing post.

Editing a Post

The last operation we need to implement is being able to edit a post. We’re going to approach this differently, editing the element on a different page. Let’s start by adding the new command to navigate to the new page within the TelerikGrid control:

<TelerikGrid ...>
    <GridColumns>
        ...
        <GridCommandColumn>
            ...
            <GridCommandButton Command="Edit" OnClick="@EditPost">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

Let’s define the custom command by adding the following method to the code section:

private async Task EditPost(GridCommandEventArgs args)
{
    var post = args.Item as Post;
    Navigation.NavigateTo($"/editpost/{post.Id}");
}

The code above receives the parameter of the element on which the button is pressed and then navigates to the editpost page passing the record id as a parameter. This page hasn’t been created yet, so we’ll proceed to create the new page component inside the Components folder with the name EditPost.razor, which looks like this:

@page "/editpost/{id:int}"
@using BlazorGraphQLDemo.Models
@using GraphQL
@using GraphQL.Client.Http
@using Telerik.Blazor.Components
@inject NavigationManager Navigation
@rendermode InteractiveServer
@inject GraphQLHttpClient HttpClient
@inject IJSRuntime JSRuntime

<h3>Edit Post</h3>

<EditForm Model="@post" OnValidSubmit="@UpdatePost">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>Title:</label>
        <InputText @bind-Value="post.Title" />
    </div>
    <div>
        <label>Body:</label>
        <InputText @bind-Value="post.Body" />
    </div>
    <TelerikButton ButtonType="@ButtonType.Submit">Save</TelerikButton>
    <TelerikButton OnClick="@Cancel">Cancel</TelerikButton>
</EditForm>

As we mentioned earlier, this component represents a new page that expects the id of the post we want to modify. On this page, we use an EditForm component to modify the post information. Below I show you the code to carry out both the retrieval of the requested post and the modification of the post:

@code {
    [Parameter] public int Id { get; set; }
    private Post post = new Post();

    protected override async Task OnInitializedAsync()
    {
        await LoadPost();
    }

    private async Task LoadPost()
    {
        var idParameter = new GraphQlQueryParameter<string>("id", "ID!", null);

        var postFragment = new PostQueryBuilder()
            .WithId()
            .WithTitle()
            .WithBody();

        var query = new QueryQueryBuilder()
            .WithParameter(idParameter)
            .WithPost(
                postFragment,
                idParameter
            );

        //Generated Query:
        // query($id: ID!) {
        //     post(id: $id) {
        //         id
        //         title
        //       body
        //     }
        // }

        var request = new GraphQLRequest
            {
                Query = query.Build(Formatting.Indented),
                Variables = new { id = Id }
            };

        var response = await HttpClient.SendQueryAsync<GraphQlResponse>(request);
        post = response.Data.Post;
    }

    private async Task UpdatePost()
    {
        var idParameter = new GraphQlQueryParameter<string>("id", "ID!", null);
        var inputParameter = new GraphQlQueryParameter<UpdatePostInput>("input", "UpdatePostInput!", new UpdatePostInput());

        var mutation = new MutationQueryBuilder()
            .WithParameter(idParameter)
            .WithParameter(inputParameter)
            .WithUpdatePost(
                new PostQueryBuilder()
                    .WithId()
                    .WithTitle()
                    .WithBody(),
                idParameter,
                inputParameter
            );
        //Generated query:
        // mutation($id: ID!, $input: UpdatePostInput!) {
        //     updatePost(id: $id, input: $input) {
        //         id
        //         title
        //       body
        //     }
        // }

        var request = new GraphQLRequest
            {
                Query = mutation.Build(Formatting.Indented),
                Variables = new
                {
                    id = post.Id,
                    input = new { title = post.Title, body = post.Body }
                }
            };

        var response = await HttpClient.SendQueryAsync<GraphQlResponse>(request);

        await JSRuntime.InvokeVoidAsync("alert", $"Post updated successfully. Title: {response.Data.UpdatePost.Title}, Body: {response.Data.UpdatePost.Body}");

        Navigation.NavigateTo("/posts");
    }

    private void Cancel()
    {
        Navigation.NavigateTo("/posts");
    }
}

In the code above, within the LoadPost method, I show you a way in which you could represent the use of fragments that can be reused in other queries in a typed way.

Similarly, in the UpdatePost method, an inputParameter called UpdatePostInput defined in the GraphQL schema is used and is required to update an element (as can be seen in the generated query). This parameter along with idParameter are used to create the query that will allow executing the mutation to edit a post. On the other hand, the Cancel method performs navigation to the previous page without executing any changes.

Finally, you must update the GraphQlResponse class as follows to support the service responses:

public class GraphQlResponse
{
    public PostsData Posts { get; set; }
    public Post CreatePost { get; set; }
    public Post UpdatePost { get; set; }
    public Post Post { get; set; }
}

When applying the changes above, you’ll see a new button in the TelerikGrid control that will allow navigation to the new page to make edits to an element. When making the change and pressing the Save button, you’ll see the changes applied to the entity as follows:

With this, we have finished implementing all CRUD operations on the GraphQL service.

Conclusion

Throughout this post, you have learned how to integrate a GraphQL service into a Blazor application by performing different types of service queries, as well as leveraging Telerik UI for Blazor controls to create quick and beautiful graphical interfaces. It’s time for you to get to work and extend the application even further with new functionalities!

Want to try it yourself? Telerik UI for Blazor comes with a free 30-day trial.

Get Started