.Net Foundation On .NET, 27 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with GraphQL and HotChocolate

Description

Hot Chocolate is a GraphQL platform for that can help you build a GraphQL layer over your existing and new infrastructure.

In this episode, we’re joined by the author of Hot Chocolate, Michael Staib, who shows us how we can start creating GraphQL based Web APIs with Hot Chocolate and some other delicious deserts.

[01:27] - What is GraphQL?
[04:50] - What’s the story behind Hot Chocolate?
[05:48] - How does GraphQL compare to RESTful APIs?
[06:48] - Setting up a HotChocolate in ASP.NET Core (Demo)
[09:43] - Querying with Banana Cake Pop (Demo)
[12:00] - Querying relationships (Demo)
[21:03] - Where to learn more?

Hot Chocolate on GitHub
https://github.com/ChilliCream/hotchocolate

GraphQL Workshop
https://github.com/ChilliCream/graphql-workshop

What is up with 11 of Hot Chocolate?
https://chillicream.com/blog/2020/07/16/version-11

Create web APIs with ASP.NET Core
https://docs.microsoft.com/aspnet/core/web-api/?WT.mc_id=ondotnet-c9-cephilli

#GraphQL #AspNetCore #WebAPI

A

Save the date for dot net conf 2020 happening this year on november 10th through 12th, with this year being our 10th anniversary, there will be tons of great announcements like the launch, of.net 5 and we'll also have some surprise guests too.

A

So, please make sure you check us out for this free three-day, virtual developer event where you'll see live sessions from the.net community, as well as various product teams head over to dotnetconf.net, to learn more and tune in in this episode of the on.net show we're going to learn how to build graphql applications using a really interesting project called hot chocolate, so sit back, relax and I hope you.

A

A

Hey everyone welcome to another episode of the on.net show. My name is cecil phillip, and today we have a very special guest, michael who's, going to talk to us about building applications with hot chocolate. So michael, why don't you introduce yourself really quickly and let everyone know who you are and what exactly do you do.

B

Yeah hi everyone, I'm michael stipe, I'm a microsoft mvp and I'm one of the authors of the hot chocolate graphql libraryphoto.net and yeah. As you already heard, it's about graphql and we started originally three years ago to bring a better experience. To.Net with graphql.

A

Nice, so why don't we take just a really quick moment to explain what exactly graphql is, because I know there's a lot of talk about it, but maybe everyone may not know exactly what graphql does or what it's for.

B

Great okay, let's head right into it, so first you don't have to take notes. I have put all the demos and slides uh right behind this link, so just go there and you will find the github repository with everything you need.

B

So what is graphql graphical was originally developed by facebook to fix the data fetching needs that they had with no mobile applications.

B

So if we look at this initial graphql query here, it basically asks the server to fetch the currently assigned end user and from this currently signed in user, the name and if we send that to our graphql server, we will get a response that closely aligns our query request. It almost almost looks like the graphql server fills our request up with data and as we go along and change our use cases or need more or less data, we just go and change our request.

B

And if we look at this request here, we can already see that's not only about simple, sparse fields. It's about data trees, and this allows us basically to drill into relations and drilling into relations, really allows us to push back the data aggregations to the server side- and this puts us in puts us as the consumer of a graphql api in control.

B

But if we look at this uh request here, we can also see some repetitions and with graphql we have a concept called fragments and fragments, basically are the primitives of composition in graphql which allow us to build fragment hierarchies as we build component hierarchies in our uis or class hierarchies in our servers.

B

Okay, just as a quick recap with graphql, we have one endpoint to fetch our data and you can fetch all the data in one request and that really gets rid of the overall under fetching problem and graphql built on a strong type system, and this really lets us, predictably use our endpoints. We as the consumer of graphql endpoint, can trust that if the server says this is a string field, it will always be a string field.

B

Okay. So this is a three-minute introduction to graphql there's much more to explain, but I think it's better to head in or.

A

Yeah, that was a really good introduction, and you know I've heard a lot about graphql in the past, like I've, written restful, apis or http based apis with gets and puts and posts, and things like that and kind of looking at the example, you showed graphql kind of looks like jason without the semicolons and the quotes around them a little bit.

B

Yeah, that's why often, when people start with it and they look, they mistake it for jason and that's why the analogy quite well works that you send in like an empty json graph and give the filled up json.

A

Graph back right right, so why don't we talk now about hot chocolate right now, hot chocolate? My from my understanding is a implementation of graphql or a fragment for writing. Graphql servers with dotnet core right or asp.net core. So why.

B

A

Start with what exactly did you decide to make this this framework.

B

Yeah when we started actually on the project to integrate graphql, we tried out a lot of frameworks that were around, but they didn't feel easy and they were not as powerful as we needed back in that time, and so at one christmas eve, I sat down and started writing the plaza and thought I would be finished in two weeks, but it took over a year, but essentially that was the starting of hot chocolate and then other contributors chimed in and now there are lots of people contributing to this project.

A

Okay, so when you look at graphql, would you consider it to be something that you could use alongside of restful services, or do you think it's something that you could do instead of restful services like how do we? How do we kind of position that.

B

So there is a lot of gray area, so not every uh service has to be a graphical server. You have cases where you can opt for rest or where grpc might make sense, um but graphql is very strong where you have structured data where, where you have relations like, for instance, netflix uses graphql, but they are using it for the data not for streaming movies.

B

So you have to have something where you have a lot of relational data. Otherwise it might not make sense.

A

Got it okay, so I think I have a feeling. I'm gonna have a lot more questions for you, but why don't we take a look at the demo and see how exactly we can get started with using hot chocolate.

B

Okay- let's head over here, so I already prepared a small demo and this is basically an empty asp.net core project. So if you do netweb new, you basically get this and we already are running dot net 5 and we put in the hot chocolate asp.net core package. This is basically the only modification that I did here.

A

B

Okay, so every graphql server starts with a root type and the only root type that is obligatory is the query root type. So without a query type, you don't have a graphql server, but in order to have something to that works some data, let's create, for instance, a book type, so I'm creating a class called book, and then we just had some content here. So basically, we are building a simple class here book which has a title and an author both string. Let's just start with that, and then we are adding another class query.

B

Okay, so we're creating a query type here and let me just add a query content- and this is a simple c sharp class and we just have here a method which essentially creates a new book instance that we just created and we have a title. Yes, you sharpen death and it's john skeet, and this is called actually a resolver, so hot chocolate will just infer from this class the very root type and from this the resolvers that we have on root types, we will see what they are about.

B

So next, let's go to the startup cs: to set everything up because, as as of now, we just created a bunch of classes. So in order to make it a graphql schema we're going to our service collection and are saying at the graphql server and then we chain in our graphql server configuration in this instance. We say, add query type and say a query here and we are done. We have a valid graphql schema, but there's nothing that executes graphql.

B

Yet so, let's go here to the endpoints api and use the map, graphql extension method to at basically the graphql middleware, and with that we have a valid graphql server. Let's run it.

B

It's coming up, okay, so we have a url here, which is localhost 5000., let's open edge and put that in and graphql by default is on the graphql endpoint. Let me type that in and we are getting now um a graphql id that is also built by us. It's called banana cake pop. We have lots of um yeah food names and this helps me to basically fetch data from my graphql server or explore the schema in order to explore our schema that we just built.

B

We can click on this book icon item here and just let me re-fetch the schema because yeah, because I already used it in the browser- and there was an old schema here- already pre-loaded. So now we have our schema that we just have built, and we can see that we have a book field here. So I can click on that and then I can explore what the book type is about.

B

Like I have a title and an author, this exclamation mark here means that this field never returns. None! It's a non-nullable string, okay,.

A

B

To our query, um so this area area, where I can type a graphql query- and I just can start with these quickers and then I can select uh via italicense from the fields that are available, and I basically can drill into my book. For instance, just fetch the title: let's fetch that and we can see. I get our book.

A

Oh, that's really cool! So out of the box, you have almost like an intelligent, autocomplete right, you, you know, you've run the server that you're running locally in your machine, but it's now picking up that um that schema, based on what you set up inside of that inside of your configure services right exactly.

B

A

B

Exactly and all the non-nullibility information that we see here is actually coming right from c-sharp.

B

So when you paid attention at the beginning, I set this nullable enable here and basically now the schema will re will pick that up and translate that into graphql null builds wherever I don't put a question mark like he has no question mark. So it's not nothing.

A

Nice now my other question, for you would be just really quickly you're, using a pretty straightforward example, like you have a book type and you're returning a query from a book type. What happens if I had multiple types? What if I had like books and authors and publishers, tons of things like that? That's.

B

A good question and that's uh basically where we head into our second demo. So let me swap here switch gears here. Okay and let's go to our second demo, and then we take that a little bit further.

A

I also really like that banana cake pop thing like.

B

Yeah, it's it's it's! uh So it's built on monaco, so it's built on the vs code core and we have it as application. So basically you can have it as an electron application or as a middleware okay. So the next thing is, we are taking it a bit further, so let's create a proper database model with entity framework.

B

So in this we have basically a book type and we have keys associated- and we have the author here and the author is its own entity um which again has a collection of books.

B

Okay and then we have a standard db context here with some setup about the relations and how you would basically do entity framework okay. So at the moment we have just a simple get book: resolver almost like in our first example here. So we are essentially getting c c-sharp, in-depth and john skeet.

B

So how do we make this load proper data out of the database um and maybe multiple books and stuff like that?

B

So, let's first set up our entity framework here, so we just say add to db context and we're using a pool db context, because in graphql each resolver is executed independently, if you're doing queries, which means that we potentially have multiple threads fetching data or asking for data and since um con since entity framework doesn't support multiple threads on one context: we're using a pooled db context, factory, which is brand new with net5, and it basically allows us to reuse db context and use multiple at the time.

B

Okay. So let's go back to our query type and build that all in so the first thing: let's, let's just write what we want. We want and a variable of book, because that is our let's say our list of books. Okay and then we call that get books.

B

And so that we get uh the db context as we wanted. We just write in our argument or parameter here um book context and that essentially tells our query engine that we need something injected here. Some book context: okay, let's work with it for now so then we say context books, I think- and now let's put some attributes on here, so hot chocolate can be used with attributes or the affluent api or even with schema. First, there are essentially three approaches in the graphql world to define schemas today, I'm just using the attribute version.

B

So the first thing is: we need the db context, so we tell our so we tell our engine that we need a db context and that we need the book context.

B

Next, it would be nice if we could query it a bit. So let's put something on that is called filtering. This will allow us to filter through the books. We will see what it really does in a second and just for good measure, let's also sort at some sorting capabilities.

B

Last but not least, we have something that is called use projections, and this really allows me to rewrite the incoming graphql query into an expression tree that is applied on the db context and automatically translate it into sql. Let's see what that is about so last but not least, we tell our engine that this is actually a scoped service, so a field scope service that is basically coming from here.

B

Okay, let's just run that.

A

Another quick question about that too, like while you go ahead and run it so can I assume that the attributes that you're putting in that hot chocolate is very opt-in and not opt-out? So, like you, have to opt into those features? So if I don't put those attributes on I'm not going to have filtering, I'm not going to have sorting, but I have to add them ex very explicitly.

B

A

B

In to all the things that you want- and these are actually all middlewares and we allow middlewares in fluent api, but also in in an attribute package- I think of these as yeah little packages that pack a lot of configuration code in them and just I forgot one thing like it's really opt-in. So I also have to tell my schema engine that I really want to have filtering support.

B

And why do I need to do that? Because we support pretty much every everything that you can query from elasticsearch to um odata to other other other source formats and by default? If I just write at filtering at sorting, it supports, like variable so, let's put in here and projection and then let's rerun that.

A

Okay, so you're, seeing I have to add those in both places, so I have to add it in the function as well as in my startup.cs5.

B

Yes- and I explain that in a second- why that is so.

A

B

Just let's re-fetch our schema, so what we can see here now is that we have a books um list basically here and none of the books list. We can see that author is here, so we see our query. Our schema builder already crawled the type graph and compiled a proper schema from it.

B

So I can explain on my schema very properly, but I also can see. Okay book is now wrong, so I can opt in here. I have now arguments on my field where and order and where allows me to maybe query for specific books like I could ask for the author and for the author's name, and maybe the name should contain done okay, so we could just query that and then I get back to the question that you had so I query that you can see it uh put some data.

B

Now we have the c sharp second edition third edition and whatever he wrote, but I also can see that it has basically rewritten the graphical query in one single sql command, nice.

B

Okay, so why do I put these in so on my resolvers? I just say I want projections here or I want filtering here and in the main configuration I basically can set them up like. If I just add filtering here, I add filtering support for queryable, but I also could um opt into more here and refine these filter con conventions to support other things like I want to put in spatial filter support. I want to put in support for mongodb querying or data querying. Then I can configure that here.

A

Got it okay, so that's great. So that means that, regardless of whatever my backend is you know, I should have some type of support for querying, not only just entity framework, but I could query anything that supports acquirable innumerable and like various other types of data. So um even if I had something that was attached to like a key value store or a document database or a relational database, I could put hot chocolate on top of it to get some graphql support.

B

Exactly and yeah there's lots of possible. Even there are other things that go then beyond like schema stitching, but they are more advanced topics.

A

Okay, great so michael, this has been really good introduction. um We're definitely gonna have to have you do some more videos and talk about some more of the the in-depth features of hot chocolate um for folks that are interested like they can definitely go and check out the website. um You also have the um you: have the github repo with you know, you folks can submit issues and things of that nature. I know you also have a lot of talks in youtube as well talking about hot chocolate.

A

So, yes, you know, there's tons of opportunities for folks to go in and try it out. So um so thank you for coming on and let us letting us know about it. um Thank all of you for watching- um and this has been another episode of the on.net show where we learned about how we can get started, doing graphql with hot.

A

A