In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage befüllen können. Basierend auf einem Artikel von Microsoft zeigen wir Ihnen, wie Sie die leistungsstarke Kombination aus Blazor und GraphQL nutzen können, um eine schnelle und reaktionsfähige Datenanzeige zu erstellen. Besonders praktisch ist dabei die Virtualisierungsfunktion des QuickGrid, die die Performance bei grossen Datenmengen erheblich verbessert.
Einrichten der GraphQL-Abfrage in Blazor
Um eine GraphQL-Abfrage in Blazor zu integrieren, nutzen wir das Tool StrawberryShake, das uns einen Client basierend auf dem GraphQL-Schema generiert. Fügen Sie das Paket StrawberryShake.Blazor zu Ihrem Projekt hinzu und erstellen Sie eine dotnet-tools Manifest-Datei:
”’
dotnet new tool-manifest
dotnet tool install StrawberryShake.Tools –local
dotnet graphql init http://localhost:5000/graphql -n StartrekClient
”’
Für dieses Beispiel werden wir eine Abfrage erstellen, die alle Schauspieler der StarTrek-Serie auflistet. Mit dem GraphQL-IDE-Tool können wir die folgende Abfrage erstellen:
”’
query GetActors() {
actors{
items {
id
name
birthYear
}
}
}
”’
Speichern Sie diese Abfrage in einer Datei namens GetActors.graphql im Unterordner Queries. Nach dem Erstellen des Projekts wird der Client StartrekClient generiert, der die Abfrage GetActors enthält.
Hinzufügen des QuickGrid-Komponenten
QuickGrid ist eine Razor-Komponente, die eine einfache und effiziente Datenrasterdarstellung ermöglicht. Fügen Sie das Paket Microsoft.AspNetCore.Components.QuickGrid zu Ihrem Projekt hinzu. Die Verwendung der QuickGrid-Komponente ist unkompliziert. Angenommen, wir haben eine Liste im result, könnte die Implementierung folgendermassen aussehen:
”’
<QuickGrid Items=”result.Actors!.Items.AsQueryable()”>
<PropertyColumn Property=”@(a => a.Id)” Sortable=”true” />
<PropertyColumn Property=”@(a => a.Name)” Sortable=”true” />
<PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”true” />
</QuickGrid>
”’
Die Items-Eigenschaft ist ein IQueryable, das eine effiziente Datenmanipulation ermöglicht, wie z.B. das Sortieren der Spalten.
Einbinden der GraphQL-Daten in das QuickGrid
Um die QuickGrid-Items mit den GraphQL-Daten zu verknüpfen, verwenden wir die von StrawberryShake generierte Komponente <UseGetActors>. Diese Komponente verfügt über Unterkomponenten für verschiedene Zustände der Abfrage: <ChildContent>, <ErrorContent> und <LoadingContent>. Hier ein Beispiel für eine Seite, die diese Komponente verwendet:
”’
@page “/graphql”
@using Microsoft.AspNetCore.Components.QuickGrid
@inject IStartrekClient startrekClient
<PageTitle>Actors by GraphQL</PageTitle>
<h1>Actors by GraphQL</h1>
<UseGetActors Context=”result”>
<ChildContent>
<div class=”grid”>
<QuickGrid Items=”result.Actors!.Items.AsQueryable()”>
<PropertyColumn Property=”@(a => a.Id)” Sortable=”true” />
<PropertyColumn Property=”@(a => a.Name)” Sortable=”true” />
<PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”true” />
</QuickGrid>
</div>
</ChildContent>
<ErrorContent>
Something went wrong …<br />
@result.First().Message
</ErrorContent>
<LoadingContent>
Loading …
</LoadingContent>
</UseGetActors>
”’
Die Komponente lädt automatisch die Daten über die Abfrage und macht sie im result-Kontext verfügbar.
Virtualisierung im QuickGrid
Die Virtualisierung ist eine Technik, bei der nur die im Sichtbereich befindlichen Zeilen gerendert werden. Dies verbessert die Performance erheblich, insbesondere bei grossen Datenmengen. Um die Virtualisierung zu aktivieren, setzen Sie die Virtualize-Eigenschaft des QuickGrid auf true. Sie benötigen ausserdem einen ItemsProvider, um die Daten abzurufen:
”’
<div class=”grid” tabindex=”-1″>
<QuickGrid ItemsProvider=”@actorProvider” Virtualize=”true”>
<PropertyColumn Property=”@(a => a.Id)” Sortable=”false” />
<PropertyColumn Property=”@(a => a.Name)” Sortable=”true”
IsDefaultSortColumn=”true”
InitialSortDirection=”SortDirection.Ascending”/>
<PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”false” />
</QuickGrid>
</div>
<div class=”my-2″>
<div class=”inline-block my-1″>
Total: <strong>@numResults results</strong>
</div>
</div>
”’
Definieren Sie den actorProvider so, dass er Daten entsprechend den Parametern StartIndex und Count abruft:
”’
@code {
GridItemsProvider<IGetActors_Actors_Items> 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<IGetActors_Actors_Items>(response!.Data.Actors.Items),
totalItemCount: response!.Data.Actors.TotalCount
);
};
}
}
”’
Anpassung der GraphQL-Abfrage
Um die Pagination in der GraphQL-Abfrage zu unterstützen, passen wir die Abfrage an, damit sie die Parameter skip und take akzeptiert:
”’
query GetActors($skip: Int, $take: Int) {
actors(skip: $skip, take: $take, sortBy: “name”) {
items {
id
name
birthYear
}
pageInfo {
hasNextPage
hasPreviousPage
}
totalCount
}
}
”’
Fazit
In diesem Beitrag haben wir gezeigt, wie Sie eine Blazor QuickGrid-Komponente mit einer GraphQL-Abfrage über StrawberryShake verbinden. Ausserdem haben wir die Virtualisierungsfunktion des QuickGrid aktiviert, um die Performance bei grossen Datenmengen zu optimieren. Das QuickGrid ist eine leistungsstarke Komponente, die auf vielfältige Weise angepasst werden kann.