{"id":16366,"date":"2024-09-09T12:52:02","date_gmt":"2024-09-09T12:52:02","guid":{"rendered":"https:\/\/stagingcopy.comitas.com\/dir\/?p=16366"},"modified":"2024-12-11T11:39:24","modified_gmt":"2024-12-11T11:39:24","slug":"microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql","status":"publish","type":"post","link":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/","title":{"rendered":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen. Basierend auf einem Artikel von Microsoft zeigen wir Ihnen, wie Sie die leistungsstarke Kombination aus Blazor und GraphQL nutzen k\u00f6nnen, um eine schnelle und reaktionsf\u00e4hige Datenanzeige zu erstellen. Besonders praktisch ist dabei die Virtualisierungsfunktion des QuickGrid, die die Performance bei grossen Datenmengen erheblich verbessert.<\/p>\n

Einrichten der GraphQL-Abfrage in Blazor<\/strong><\/h5>\n

Um eine GraphQL-Abfrage in Blazor zu integrieren, nutzen wir das Tool StrawberryShake, das uns einen Client basierend auf dem GraphQL-Schema generiert. F\u00fcgen Sie das Paket StrawberryShake.Blazor zu Ihrem Projekt hinzu und erstellen Sie eine dotnet-tools Manifest-Datei:<\/p>\n

”’<\/p>\n

dotnet new tool-manifest<\/p>\n

dotnet tool install StrawberryShake.Tools –local<\/p>\n

dotnet graphql init http:\/\/localhost:5000\/graphql<\/a> -n StartrekClient<\/p>\n

”’<\/p>\n

<\/p>\n

F\u00fcr dieses Beispiel werden wir eine Abfrage erstellen, die alle Schauspieler der StarTrek-Serie auflistet. Mit dem GraphQL-IDE-Tool k\u00f6nnen wir die folgende Abfrage erstellen:<\/p>\n

”’<\/p>\n

query GetActors() {<\/p>\n

  actors{<\/p>\n

    items {<\/p>\n

      id<\/p>\n

      name<\/p>\n

      birthYear<\/p>\n

    }<\/p>\n

  }<\/p>\n

}<\/p>\n

”’<\/p>\n

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\u00e4lt.<\/p>\n

Hinzuf\u00fcgen des QuickGrid-Komponenten<\/strong><\/h5>\n

QuickGrid ist eine Razor-Komponente, die eine einfache und effiziente Datenrasterdarstellung erm\u00f6glicht. F\u00fcgen 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\u00f6nnte die Implementierung folgendermassen aussehen:<\/p>\n

”’<\/p>\n

<QuickGrid Items=”result.Actors!.Items.AsQueryable()”><\/p>\n

<PropertyColumn Property=”@(a => a.Id)” Sortable=”true” \/><\/p>\n

<PropertyColumn Property=”@(a => a.Name)” Sortable=”true” \/><\/p>\n

<PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”true” \/><\/p>\n

<\/QuickGrid><\/p>\n

”’<\/p>\n

Die Items-Eigenschaft ist ein IQueryable, das eine effiziente Datenmanipulation erm\u00f6glicht, wie z.B. das Sortieren der Spalten.<\/p>\n

Einbinden der GraphQL-Daten in das QuickGrid<\/strong><\/h5>\n

Um die QuickGrid-Items mit den GraphQL-Daten zu verkn\u00fcpfen, verwenden wir die von StrawberryShake generierte Komponente <UseGetActors>. Diese Komponente verf\u00fcgt \u00fcber Unterkomponenten f\u00fcr verschiedene Zust\u00e4nde der Abfrage: <ChildContent>, <ErrorContent> und <LoadingContent>. Hier ein Beispiel f\u00fcr eine Seite, die diese Komponente verwendet:<\/p>\n

”’<\/p>\n

@page “\/graphql”<\/p>\n

@using Microsoft.AspNetCore.Components.QuickGrid<\/p>\n

\n<\/p>

@inject IStartrekClient startrekClient<\/p>\n

\n<\/p>

<PageTitle>Actors by GraphQL<\/PageTitle><\/p>\n

\n<\/p>

<h1>Actors by GraphQL<\/h1><\/p>\n

\n<\/p>

<UseGetActors Context=”result”><\/p>\n

    <ChildContent><\/p>\n

        <div class=”grid”><\/p>\n

            <QuickGrid Items=”result.Actors!.Items.AsQueryable()”><\/p>\n

                <PropertyColumn Property=”@(a => a.Id)” Sortable=”true” \/><\/p>\n

                <PropertyColumn Property=”@(a => a.Name)” Sortable=”true” \/><\/p>\n

                <PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”true” \/><\/p>\n

            <\/QuickGrid><\/p>\n

        <\/div><\/p>\n

    <\/ChildContent><\/p>\n

    <ErrorContent><\/p>\n

        Something went wrong …<br \/><\/p>\n

        @result.First().Message<\/p>\n

    <\/ErrorContent><\/p>\n

    <LoadingContent><\/p>\n

        Loading …<\/p>\n

    <\/LoadingContent><\/p>\n

<\/UseGetActors><\/p>\n

”’<\/p>\n

Die Komponente l\u00e4dt automatisch die Daten \u00fcber die Abfrage und macht sie im result-Kontext verf\u00fcgbar.<\/p>\n

Virtualisierung im QuickGrid<\/strong><\/h5>\n

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\u00f6tigen ausserdem einen ItemsProvider, um die Daten abzurufen:<\/p>\n

<\/p>\n

”’<\/p>\n

<div class=”grid” tabindex=”-1″><\/p>\n

    <QuickGrid ItemsProvider=”@actorProvider” Virtualize=”true”><\/p>\n

        <PropertyColumn Property=”@(a => a.Id)” Sortable=”false” \/><\/p>\n

        <PropertyColumn Property=”@(a => a.Name)” Sortable=”true”<\/p>\n

                                                    IsDefaultSortColumn=”true”<\/p>\n

                                                    InitialSortDirection=”SortDirection.Ascending”\/><\/p>\n

        <PropertyColumn Property=”@(a => a.BirthYear)” Sortable=”false” \/><\/p>\n

    <\/QuickGrid><\/p>\n

<\/div><\/p>\n

<\/p>\n

<div class=”my-2″><\/p>\n

    <div class=”inline-block my-1″><\/p>\n

        Total: <strong>@numResults results<\/strong><\/p>\n

    <\/div><\/p>\n

<\/div><\/p>\n

”’<\/p>\n

<\/p>\n

Definieren Sie den actorProvider so, dass er Daten entsprechend den Parametern StartIndex und Count abruft:<\/p>\n

”’<\/p>\n

@code {<\/p>\n

    GridItemsProvider<IGetActors_Actors_Items> actorProvider;<\/p>\n

    int numResults = 0;<\/p>\n

    protected override async Task OnInitializedAsync()<\/p>\n

    {<\/p>\n

        actorProvider = async request =><\/p>\n

        {<\/p>\n

            var response = await startrekClient.GetActors.ExecuteAsync(request.StartIndex, request.Count, request.CancellationToken);          <\/p>\n

            if (numResults == 0 && !request.CancellationToken.IsCancellationRequested)<\/p>\n

            {<\/p>\n

                numResults = response!.Data.Actors.TotalCount;<\/p>\n

                StateHasChanged();<\/p>\n

            }<\/p>\n

            return GridItemsProviderResult.From(<\/p>\n

                    items: new List<IGetActors_Actors_Items>(response!.Data.Actors.Items),<\/p>\n

                    totalItemCount: response!.Data.Actors.TotalCount<\/p>\n

            );<\/p>\n

        };<\/p>\n

    }<\/p>\n

}<\/p>\n

”’<\/p>\n

Anpassung der GraphQL-Abfrage<\/strong><\/h5>\n

Um die Pagination in der GraphQL-Abfrage zu unterst\u00fctzen, passen wir die Abfrage an, damit sie die Parameter skip und take akzeptiert:<\/p>\n

”’<\/p>\n

query GetActors($skip: Int, $take: Int) {<\/p>\n

  actors(skip: $skip, take: $take, sortBy: “name”) {<\/p>\n

    items {<\/p>\n

      id<\/p>\n

      name<\/p>\n

      birthYear<\/p>\n

    }<\/p>\n

    pageInfo {<\/p>\n

      hasNextPage<\/p>\n

      hasPreviousPage<\/p>\n

    }<\/p>\n

    totalCount<\/p>\n

  }<\/p>\n

}<\/p>\n

”’<\/p>\n

Fazit<\/strong><\/h4>\n

In diesem Beitrag haben wir gezeigt, wie Sie eine Blazor QuickGrid-Komponente mit einer GraphQL-Abfrage \u00fcber 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\u00e4ltige Weise angepasst werden kann.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen. Basierend auf einem Artikel von Microsoft zeigen wir Ihnen, wie Sie die leistungsstarke Kombination aus Blazor und GraphQL nutzen k\u00f6nnen, um eine schnelle und reaktionsf\u00e4hige Datenanzeige zu erstellen. Besonders praktisch ist dabei die Virtualisierungsfunktion […]<\/p>\n","protected":false},"author":4,"featured_media":16371,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[65,271,277],"tags":[],"class_list":["post-16366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-de","category-microsoft-dotnet-de","category-welt-der-it"],"acf":[],"yoast_head":"\nEffiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site<\/title>\n<meta name=\"description\" content=\"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site\" \/>\n<meta property=\"og:description\" content=\"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\" \/>\n<meta property=\"og:site_name\" content=\"Comitas Staging Site\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-09T12:52:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-11T11:39:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Julia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\"},\"author\":{\"name\":\"Julia\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/28c8d075f677168399c7948b12668d36\"},\"headline\":\"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL\",\"datePublished\":\"2024-09-09T12:52:02+00:00\",\"dateModified\":\"2024-12-11T11:39:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\"},\"wordCount\":1309,\"publisher\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#organization\"},\"image\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png\",\"articleSection\":[\"Blog\",\"Microsoft .NET\",\"Welt der IT\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\",\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\",\"name\":\"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site\",\"isPartOf\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png\",\"datePublished\":\"2024-09-09T12:52:02+00:00\",\"dateModified\":\"2024-12-11T11:39:24+00:00\",\"description\":\"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.\",\"breadcrumb\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage\",\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png\",\"contentUrl\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png\",\"width\":2000,\"height\":1000,\"caption\":\"Microsoft .NET\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stagingcopy.comitas.com\/dir\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#website\",\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/\",\"name\":\"Comitas Staging Site\",\"description\":\"Auf bestem Weg nach Morgen\",\"publisher\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stagingcopy.comitas.com\/dir\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#organization\",\"name\":\"Comitas\",\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2022\/01\/Comitas-Logo-01-1.svg\",\"contentUrl\":\"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2022\/01\/Comitas-Logo-01-1.svg\",\"width\":198,\"height\":80,\"caption\":\"Comitas\"},\"image\":{\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/comitas-ag\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/28c8d075f677168399c7948b12668d36\",\"name\":\"Julia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/971dc414d4c624079b5aa418d5352c0b41b900d8db64b3bd55019929a5c1e8dd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/971dc414d4c624079b5aa418d5352c0b41b900d8db64b3bd55019929a5c1e8dd?s=96&d=mm&r=g\",\"caption\":\"Julia\"},\"url\":\"https:\/\/stagingcopy.comitas.com\/dir\/author\/julia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site","description":"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site","og_description":"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.","og_url":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/","og_site_name":"Comitas Staging Site","article_published_time":"2024-09-09T12:52:02+00:00","article_modified_time":"2024-12-11T11:39:24+00:00","og_image":[{"width":2000,"height":1000,"url":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png","type":"image\/png"}],"author":"Julia","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Julia","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#article","isPartOf":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/"},"author":{"name":"Julia","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/28c8d075f677168399c7948b12668d36"},"headline":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL","datePublished":"2024-09-09T12:52:02+00:00","dateModified":"2024-12-11T11:39:24+00:00","mainEntityOfPage":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/"},"wordCount":1309,"publisher":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/#organization"},"image":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage"},"thumbnailUrl":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png","articleSection":["Blog","Microsoft .NET","Welt der IT"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/","url":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/","name":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL - Comitas Staging Site","isPartOf":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage"},"image":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage"},"thumbnailUrl":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png","datePublished":"2024-09-09T12:52:02+00:00","dateModified":"2024-12-11T11:39:24+00:00","description":"In unserem neuesten Blog-Beitrag werfen wir einen Blick darauf, wie Sie das Blazor QuickGrid mit Daten aus einer GraphQL-Abfrage bef\u00fcllen k\u00f6nnen.","breadcrumb":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#primaryimage","url":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png","contentUrl":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2024\/09\/Microsoft-.NET-22.png","width":2000,"height":1000,"caption":"Microsoft .NET"},{"@type":"BreadcrumbList","@id":"https:\/\/stagingcopy.comitas.com\/dir\/blog-de\/microsoft-dot-net-datenanzeige-mit-blazor-quickgrid-und-graphql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stagingcopy.comitas.com\/dir\/"},{"@type":"ListItem","position":2,"name":"Effiziente Datenanzeige mit Blazor QuickGrid und GraphQL"}]},{"@type":"WebSite","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#website","url":"https:\/\/stagingcopy.comitas.com\/dir\/","name":"Comitas Staging Site","description":"Auf bestem Weg nach Morgen","publisher":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stagingcopy.comitas.com\/dir\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#organization","name":"Comitas","url":"https:\/\/stagingcopy.comitas.com\/dir\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/logo\/image\/","url":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2022\/01\/Comitas-Logo-01-1.svg","contentUrl":"https:\/\/stagingcopy.comitas.com\/dir\/wp-content\/uploads\/2022\/01\/Comitas-Logo-01-1.svg","width":198,"height":80,"caption":"Comitas"},"image":{"@id":"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/comitas-ag"]},{"@type":"Person","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/28c8d075f677168399c7948b12668d36","name":"Julia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stagingcopy.comitas.com\/dir\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/971dc414d4c624079b5aa418d5352c0b41b900d8db64b3bd55019929a5c1e8dd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/971dc414d4c624079b5aa418d5352c0b41b900d8db64b3bd55019929a5c1e8dd?s=96&d=mm&r=g","caption":"Julia"},"url":"https:\/\/stagingcopy.comitas.com\/dir\/author\/julia\/"}]}},"_links":{"self":[{"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/posts\/16366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/comments?post=16366"}],"version-history":[{"count":13,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/posts\/16366\/revisions"}],"predecessor-version":[{"id":18173,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/posts\/16366\/revisions\/18173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/media\/16371"}],"wp:attachment":[{"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/media?parent=16366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/categories?post=16366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stagingcopy.comitas.com\/dir\/wp-json\/wp\/v2\/tags?post=16366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}