Efficient data display with Blazor QuickGrid and GraphQL
In our latest blog post, we take a look at how to populate the Blazor QuickGrid with data from a GraphQL query. Based on a Microsoft article, we show you how to leverage the powerful combination of Blazor and GraphQL to create a fast and responsive data display. The QuickGrid's virtualization feature is particularly useful, as it significantly improves performance when dealing with large datasets.
Setting up the GraphQL query in Blazor
To integrate a GraphQL query into Blazor, we use the StrawberryShake tool, which generates a client based on the GraphQL schema. Add the StrawberryShake.Blazor package to your project and create a dotnet-tools manifest file:
"'
dotnet new tool-manifest
dotnet tool install StrawberryShake.Tools –local
dotnet graphql init -n StartrekClient
"'
For this example, we will create a query that lists all the actors in the Star Trek series. Using the GraphQL IDE tool, we can create the following query:
"'
query GetActors() {
actors
items {
id
name
birthYear
}
}
}
"'
Save this query in a file named GetActors.graphql in the Queries subfolder. After the project is built, the StartrekClient client will be generated, which contains the GetActors query.
Adding the QuickGrid component
QuickGrid is a Razor component that provides a simple and efficient grid representation of data. Add the Microsoft.AspNetCore.Components.QuickGrid package to your project. Using the QuickGrid component is straightforward. Assuming we have a list in the result, the implementation might look like this:
"'
a.Id)” Sortable=”true” />
a.Name)” Sortable=”true” />
a.BirthYear)” Sortable=”true” />
"'
The Items property is an IQueryable that allows efficient data manipulation, such as sorting the columns.
Integrating GraphQL data into the QuickGrid
To link the QuickGrid items with the GraphQL data, we use the component generated by StrawberryShake. This component has subcomponents for different query states: , and Here is an example of a page that uses this component:
"'
@page “/graphql”
@using Microsoft.AspNetCore.Components.QuickGrid
@inject IStartrekClient startrekClient
Actors by GraphQL
Actors by GraphQL
a.Id)” Sortable=”true” />
a.Name)” Sortable=”true” />
a.BirthYear)” Sortable=”true” />
</div>
Something went wrong…
@result.First().Message
Loading…
"'
The component automatically loads the data via the query and makes it available in the result context.
Virtualization in QuickGrid
Virtualization is a technique where only the rows within the visible area are rendered. This significantly improves performance, especially with large datasets. To enable virtualization, set the Virtualize property of the QuickGrid to true. You also need an ItemsProvider to retrieve the data.
"'
a.Id)” Sortable=”false” />
a.Name)” Sortable=”true”
IsDefaultSortColumn=”true”
InitialSortDirection=”SortDirection.Ascending”/>
a.BirthYear)” Sortable=”false” />
</div>
Total: @numResults results
</div>
</div>
"'
Define the actorProvider so that it retrieves data according to the parameters StartIndex and Count:
"'
@code {
GridItemProvider actorProvider;
int numResults = 0;
protected override async Task OnInitializedAsync()
{
actorProvider = async request =>
{
var response = await startrekClient.GetActors.ExecuteAsync(request.StartIndex, request.Count, request.CancellationToken);
if (numResults == 0 && !request.CancellationToken.IsCancellationRequested)
{
numResults = response!.Data.Actors.TotalCount;
StateHasChanged();
}
return GridItemsProviderResult.From(
items: new List (response!.Data.Actors.Items),
totalItemCount: response!.Data.Actors.TotalCount
);
};
}
}
"'
Adjusting the GraphQL query
To support pagination in the GraphQL query, we adapt the query so that it accepts the parameters skip and take:
"'
query GetActors($skip: Int, $take: Int) {
actors(skip: $skip, take: $take, sortBy: “name”) {
items {
id
name
birthYear
}
pageInfo {
hasNextPage
hasPreviousPage
}
totalCount
}
}
"'
Conclusion
In this article, we demonstrated how to connect a Blazor QuickGrid component to a GraphQL query using StrawberryShake. We also enabled QuickGrid's virtualization feature to optimize performance with large datasets. QuickGrid is a powerful component that can be customized in a variety of ways.
