ChilliCream is met HotChocolate al een aantal jaar bezig om een betere experience voor GraphQL naar .Net te brengen. En los van een toffe product naam is die experience ook echt wel zo ver momenteel. HotChocolate werkt fantastisch!

GraphQL oorspronkelijk ontwikkeld door Facebook helpt bij het ophalen van data uit API's. Het geeft de consumer controle over de API’s. En houd je met gebruik van deze query taal nog maar één endpoint over en doe je ook nog maar één request. Eén request om exact op te halen wat nodig is en dat over meerdere resources heen. Helemaal ideaal voor de moderne headless frontend toepassingen van tegenwoordig. Bij mijn werkgever theFactor.e ontwikkelen onze frontend teams al niet meer anders dan tegen GraphQL API’s. Tenminste als het om relationele en gestructureerde data gaat.

Maar wanneer jij hier bent beland weet je dit vast reeds en ben je juist geïnteresseerd in GraphQL op .Net. Dus laten we snel beginnen met HotChocolate. Want het is juist zo mooi doordat het zo ontzettend simpel is.

We beginnen met een leeg .Net Core web project:

> dotnet new web


Voeg vervolgens HotChocolate toe aan je project en je setup is klaar:

> dotnet add package HotChocolate.AspNetCore


Als eerste hebben we een object nodig om te queryen. Bijvoorbeeld een simpel Film object:

namespace graphql_demo
{
    public class Film
    {
        public string Title { get; set; }        
        public string Director { get; set; }
    }
}


Daarna een Query class:

namespace graphql_demo
{
    public class Query
    {
        public Film GetFilm() => new Film 
        {
            Title = "The Double Life of Veronique",
            Director = "Krzysztof Kieslowski"
        };
    }
}

Dit is het Query root type voor jouw GraphQL Sever. Hierin zetten we één resolver genaamd film (getFilm()).

Dan resteert ons eigenlijk alleen nog de Startup.cs aan te passen. Er moet als eerste een schema aangemaakt worden voor de root Query in de ConfigurationServices:

public void ConfigureServices(IServiceCollection services)
{
    services
        .AddGraphQLServer()
        .AddQueryType<Query>();
}


En hoeven we dit schema daarna alleen nog maar uitvoerbaar te maken. Wijzig de standaard “Hallo World!” endpoint, die met een nieuw web project wordt aangemaakt, en richt deze naar de GraphQL middleware:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
        {
            endpoints.MapGraphQL();
        });
}


En je bent al klaar. Je hebt een GraphQL server. Echt waar! Standaard draait de endpoint op http://localhost:5000/graphql/

En je zult daar een prachtige IDE zien genaamd Banana Cake Pop. Gebouwd op Monaco dus ook beschikbaar als Electron app. Hier kun je door je schema’s heen bladeren (linker panel) en zul je ook hier jou Query's en Mutaties kunnen uitproberen (rechter twee panels).

Natuurlijk is dit pas één enkele Query en zit hier nog geen database achter. Maar ook dat werkt erg mooi. Met name met Entity Framework in .Net 5 en met projections. En zijn ook filters en sorteringen super eenvoudig toe te voegen middels attributen op je methodes (resolvers).

Met name de support voor IQueryable projections is erg krachtig in combinatie met de HotChocolate middleware.

Echt wel een prachtig project vind ik zelf! Waar naast HotChocolate en Banana Cake Pop ook nog andere projecten aanhaken Marshmellow Pie: schema registry, Strawberry Shake: GraphQL client, Green Donut: dataloader voor N+1 problemen.

Ik ben enthausiast!