HotChocolate: An Introduction to GraphQL for ASP.NET Core by Michael Staib

hi guys I hope you had a great conference so far and still have some brain capacity left to put more knowledge into your brains and I'm Michael Stipe I'm a Microsoft MVP and I'm one of the authors of the hot chocolate graphical library for.net so let's get started with some graphic web so most dotnet developers actually do not really know what graphic well is when I go to conferences or user groups I often just see a few raise tenders and when I asked them do you know graphic well have you ever used it and there's also a lot of confusion about what graphic where is in the.net community some people think it's a graph query data based language or some people think it's some kind of a no data are just from Facebook and that's far from it so actually Facebook started work on graph coil in 2012 and they did that because back in the days they introduced a new set of mobile applications like everybody knows the Facebook app for their mobile devices and back then Facebook and a lot of criticism for their web applications for their mobile applications and that was due to the fact that the apps burned through the battery life of the mobile devices very quickly and also had some other issues like startup times were slow and the app overall feels very sluggish and on top of that the application also burned quickly to you through the data plans so they consumed a lot of data there and Facebook build these initial apps actually with standard web technologies so they used HTML for the visual parts and they used rest and the backend so after the criticism that Facebook earned they looked into the problem and they saw just when the application starts it already fetches hundreds of hundreds of connections to fetch data so in order to understand what actually was the problem I prepared the demo I like to start with demos into talks because they make you understand it much better with the extra problems so there is a site or a demo for REST API so it's called Z Star Wars or the swap it's repeated Co and it's a Star Wars API that basically depicts how you can build good rest api's and what I want to do here is I will try to solve a problem with the REST API and then we gonna do and solve the same problem with graph QL API so first we use floppy dot code and the problem that we want to solve is basically we want to fetch all these Star Wars characters that appeared together with Luke Skywalker in Star Wars movies it's an easy enough task we just want to generate one set of names so basically a set of the names of the characters that appear together with Luke Skywalker and first name develop a soil I think for back-end developers in general these rest api is easy to navigate and easy to understand so in our swamp eco here we have basically situ explorer like swagger and we can see it has a few endpoints here rest is both the con is built around the concept of resources like we have a resource here that is called people that is exposed through the end point through the people's end point and we basically can navigate those data by drilling in by fetching these end points so i could fetch the people's end point and i would get a list of characters basically for instance i get the luke skywalker character here or if i scroll down I get the CBC POS with EPO character or the r2d2 character so basically this is a list of my characters and I can already see it has a lot of properties here and I can see it has a URL property and I could fetch a specific character so I prepared that already and when I do that I basically get a single character and again I have all the proper the properties that I had in the list and I can see a luke skywalker's name and I can see we have a films around here so I can kind of see what films Luke Skywalker played in and the interesting part here is that the movies are represented by you eyes and the you eyes are basically references to the film subjects and I basically can't fetch them again and would get the film's instance that are fetched and again I have a lot of properties here like title they don't interest me actually and I can see I have a characters array the characters array is actually again a list of your eyes and each of these you eyes points to a character that appeared in that movie and I could go along that way and fetch all the movies so I could kind of see how I could gather this data so what I've done is I took a little bit of JavaScript it's the only JavaScript you see today so bear with me I'm running to the JavaScript to basically implement our algorithm that basically first fetches our luke object from the Swafford CO and then we iterate over the firm's array that we saw in our data structures and then we fetch each of the terms and again we would iterate over each of the characters and then fetch each of the characters and then push that to a to two characters array here we would do some data massaging to just extract the name but just looking at the code we already see that this might not be the most efficient way but let's see how this performs when we run it and run that so I can go here into my my program that I wrote and let me just get up the the Bela producer of Chrome and just run the wrestler gene and I already can see it's pulling up a lot of connections I have quite a fast internet connection but it still took 1.6 seconds and I can already see why because we actually created a data waterfall so we have dependent chords that basically I first have to fetch Luke and I can see the first call fetch the full Luke object so I've fetched all the data that I actually don't need I don't need the Luke data I just actually need the firm's that you played in and then I fetched a lot of other data like here I might have fetched film and we can dig in deeper and see okay here I've actually fetched a character that I need and I actually just needed the name but still we fetched the whole object okay so let's explore how we would do that with graph graph so I've prepared here graphical ID that's also a built by our project and we basically have the same API built for graph well and the interesting aspect here is that this graph query API actually uses the rest endpoint in the backend okay so let's explore how graph query works so let me just refresh my schema here so this is my graph query server it's hosted here and I can see when I click here on the book icon that I have a query type I I explained what the query type is in a minute and I have some field that is called character here and I can click on that and drill into basically my type structure of my graphical server so the character field actually exposes to me a character object and if I expand that I can see the character field needs an ID and will give me a character back and the character has attributes like in the rest API but it's went but when we look at the movies array here we can see instead of getting a reference for this object I actually get the object back and I can drill into that object and see that it exposed the characters like the rest API and I can drill in so before I did my first request against this API I could fully inspect the type system of my graph query server okay so let's have a look at how we would query a graphical server so in graph query we would start with a keyword query because the very key word indicates that we want to do a read request to our API and then we would start like in JSON with some squiggles and then already our intellisense kicks in and we can choose with what fields we want to use and I remember from my from the rest data that luke skywalker's actually ID 1 and I could kind of just say okay I want the character 1 and actually I want the name of the character okay let's let's fetch that just and boom I just specified that I want the character 1 Luke Skywalker and I want the name of it and actually I got exactly that back in the same structure and so in graphical request and response closely aligned so let's get back to our algorithm that we wanted to write so actually we don't want the name of Luke Skywalker we actually wanted the movies and we just want the movies because in the movies they are characters and that of the characters that appear along alongside Luke Skywalker and from these characters I just want the name and I'm basically done with my algorithm I can fire that up and I have my list of names so in graph QL I basically can drill into data and describe data in a more structural way and that basically helps me optimizing my requests because I don't have to over fat you on the fetch because I can specify what I actually need a nasara' fulfills this need okay so let's see how that would perform in our unscientific benchmark here I brought the same the same request enough graph well and let's fire that up and we can see 644 milliseconds it's the AFT but let me just see the data what phone here we can know it's Emmett let's do it again because yeah somehow my chrome is messed up I have here prepared version because actually the real fetch is much faster often from and queues request but the actual data fetching takes only milliseconds like in this case it takes 42 milliseconds and all the rest is basically of either a course request that is before the graph go a request and the actual data fetching is much much faster so 42 milliseconds and only two point eight kilobytes against against 1.6 seconds and I think it was over a hundred requests ok let's get back to my slides so with Rothwell and we have reversing the responsibilities like the consume of the API is put in the driver seat the consume and the of the API defines what data he or she needs at which specific time on which specific component and the server basically fulfills that need and in graph where query and response or request and response closely align and that's one of the key features in rest we could also build something like that in rest we could also build dynamic API so we could have sparse fears but if we look at for instance this dynamic endpoint from the Amazon shop API we can see that it's very difficult to read and we cannot discern from the request how our structure or what comes back really will look like and also if I really want to optimize in rest for specific devices or specific websites it's always some iterations between front-end and back-end developer and that takes time and also is sometimes error-prone because the back-end developer implements something that he thinks we need or he misunderstood us and then we have iterations between front-end and back-end and that takes time and effort so what is graphic well actually graph coil is query language for your API and runtime to fulfill those queries and when we look how graph query actually works is we ideally would put a thin graphical layer on top of our business layer and graph will is a great way to expose our business layer and make it work in servus way but that's not actually how most of the graph Carver's work in the white because most graph preservers actually are built over a set of micro services and because craft web is a very good way to bring all those microsomes together and have a monolithic way to act actually access your data because just dealing with lots of micro services from a front a front end perspective is quite difficult so with graph where we strive for the single source of truth where we can explore and reason over there our data by using one singer one single endpoint and we can fetch all the data that we need at one specific point in time and one request and that basically gets rid of the over-and-under fetching problem on the client side basically we get rid of the n plus 1 problem and that is actually much better because we are moving the data aggregation to the back end and because in the back end we have much better benefits think about mobile connections that might be bad you don't have to deal with that anymore you just have one request through your back-end you get all the data back and the back end will actually aggregated and fetch from all these micro services or fetch from all the data sources from the database and do all the aggregation and the server can actually do that in a much more efficient way and Gregoire's built on that strong type system and we saw that in the beginning when I explored basically the schema and could already see what types there are and it's not only fake like with swagger the types really are enforced and one important aspect here also is broth where's real-time that means the way the way you saw me typing up a query for a simple fetch is the same way then we can query the system in real-time and we will see that later in a demo and all of this makes graft we're very predictable to use so when I've told you so far is that graph care basically gives the consumers of the clients of the API the power to exactly ask for what they need and nothing more and this sometimes scares back-end developers I mean for front-end developers graphic where basically sells itself because you you put a front-end developer in front of graft well or a graphical IDE in front of our personal graph well I de banana cake pop and they start crying because they can just create the requests they need can explore the data and they are not not anymore in a position where they have to wait for the back-end developers but a back-end developer has some kind of a fear of the of control loss and so when we see companies introducing graphic well there's in the beginning often the fight between those two parties but actually graph QL is opportunity for backup developers because finally you have the utilities to describe your data in a very strict way you can mold how a front-end developer actually accesses your data and you're not any more limited by those service by those protocols like rest or soap in the way you have to structure your data and you also can define like the maybe the cost comes or the complexity of the field so you can limit what actually can be put in one request so it's actually an opportunity for us back to developers so we first saw that I did a simple query so query is basically a read operation against graphical and server the graph query server has three kinds of operations so we have query a Reed & Reed's are expected in graph where to be side-effect free and then we have rotations and rotations they change data so they produce side effects and they compare to put post patch delete in rest and then we have events and they are called subscriptions in our subscription in graph well and they give us a power to write basically queries that are executed and sent to us when something happens on the cell okay let's explore these operations a bit and that's the last demo where you don't see c-sharp let's just get into it yeah do a dotnet run that's actually not good it just fix that okay okay ah okay damn I like global J's dismal let me just fix that to the correct version that I have installed okay let's get back in don't run yeah it's always with life demos you have a back occasionally let's run that okay my service up and and just type in our local ul into our graph well I D and just do a refetch here nope it's not on this pour this crap crap should actually come up let's see oh it's on a different pot okay sorry for that so now our demos beg up it's basically a Star Wars schema again we have now all the operations here available like we have queries we have mutations and we have subscription and let's first get into queries again because graphic and much can do much more than I showed you initially like let's maybe explore this characters this field here oh here which returns a character but this time actually we can see that character is actually an interface and is implemented by droid and human like this is a more object-oriented API for graphic well oh so we again start writing our query and with then type maybe hero and basically what this field does is give it gives us the hero of a specific episode so I could ask give me the hero for maybe general returns wrong squiggle here and I could ask for the name because it's an interface I have some fields already available that I can ask for but if I look back at the heroes a field and look at the human for instance then I can see that there are specific fields for human like the human has a field home planet and the Droid for instance that's a primary function so how would I fetch data for this specific fields so graph Gale has a concept of fragments so I have for instance in you know in front mint where I can say okay if this.type that is returned here is actually a droid then give me its primary function and if the type is actually human return me the home planet now let me fetch that again because it's r2d2 I get the primary function and if I go to different episodes for instance Empire Strikes Back I now get Luke Skywalker and grafica actually can do much more than like proper front of fragment definition where you can build reusable components but I won't get into that in this time okay that's basically a nice Grammy time I could write let's call it gets hero hero and let's see what mutations are not so mutations I start with basically mutation and in this case I write the mutation is called create revenue and I could then I want to write a review for the episode Empire Strikes Back and I can provide the review here as an object in this case I can maybe do a commentary hello or good movie and I can give it some stars for instance let's give it five stars and the important thing was black really just this top field is actually the mutation that is what changes data I mean this is the thing that comes beneath that field is actually we are now able to query the change state of the server well for this demo it's kind of not so awesome because I'm just basically requiring what I wrote to the server but think about when I connect objects or stuff like that then I could refetch the change data structures and basically directly by updating my data already update my client with that okay so if I execute that mutation I get back what I expected I basically write something to my server and I get that back but here's where it becomes supposin let's have a look at subscriptions for this I open a new tab and you may be guessed it for subscriptions I start with subscription and I now have a subscription that is called on revenue and our basic he can tell it okay if there is a review for Empire Strikes Back please give me the stars I want to start count because I'm writing maybe a microburst that aggregates the last current and there's some fancy stuff with it so I could play that and actually nothing happens because there's nothing happening on happening on my server well I could I could go to my tab where I wrote the review and actually maybe let's first write something for Jedi execute that and actually nothing happens here because I'm not writing something for Empire Strikes Back but the moment I write a review for Empire Strikes Back oh that this not good oh I'm executed the wrong I actually executed my query the moment I execute ready for Empire Strikes Back the result is already here and I could maybe just change this a bit like put a 3n execute it again and I already can see I have my change result here so I basically just write a simple query and indicate that it's actually a subscribe subscriptions and then my query is every time send to me when something changes on the server regarding this event I'm hooked on to and this is really super powerful and it's actually how in Facebook for instance the light count works okay so let's get rid of that and get back to our slides because I have much more okay so so far we just talked about what graph queries let's have a look at what graph coil is not I said initially graph query is not a graph database query language and I hope everybody agrees now and Bradwell is also not bound to a specific data source so it doesn't matter if you have SQL so behind it if you have rest services behind it if you have soap behind it rahu is basically a layer over that and has a concept of a resolvers we will have the look at that in a minute to resolve data for the various types a it types it exposes and it's also not Facebook's version of all data graph where is much clearer structured and has a much richer set of feature and was developed with a completely different mindset so we're all data is maybe an abstraction or over data source like a mess or something like this graph has really built for api's m graph care is not a good solution for binary streams why netflix actually uses graphic where they are not using it to stream your movies so graphically is very good for data for structured data where you can drill into relations and stuff like that and cracker is actually not limited to HTTP and actually our framework is working on G RPC integration so that you can put graph well over G RPC and it's also not limited to the JavaScript word we don't know developers sometimes think that is a JavaScript thing but actually the first graph query server was written by Facebook and PHP and it actually was not written for web page it was written for native mobile applications okay so let's have a look how graph query works in net how can we build a dotnet graph where cell and for that let me kill this one and start my next demo oh okay let's just wait for a rider to load my project okay so this project is still loading this project is actually an empty asp.net core application the one thing that is different from a standard expiain core project is that I actually have the hot chocolate asp.net core package in here and apart from that there is nothing in there so we talked about that graph where it's exposing a schema so everything in graph Belle is built around the schema and the schema actually exposes route types so query is so-called wood tile and and c-sharp we could basically write a class maybe that is called query and then we might then we also saw these fields and that actually could be in c-sharp maybe a function that's a method let's do a string hello word but and just say hello okay oh my god do we make yes can I quickly interrupt okay can you zoom in a little bit yes sorry I no worries thank you that that's better okay so let's make this wrapper schema and in order to do that we have to set up our scheming with asp.net course a we basically added to our dependency injection and we can do that by saying that draft well and then we have something that is called a schema builder and the schema builder Spacek basically helps us setting up that schema so with the schema builder I have through an API to say schema build a new and at query type and then I can just and this query and I'm basically done I have my schema here it's very simple its key okay so but there's still some missing we still need something that executes on that schema so we need a middleware and that's we can set up by saying use graph cloud and now our things should actually work let's talk and watch run that because we are going to change it starting we can already head back to a graphical ID say good host don't 5,000 okay let's refresh that oh maybe not yes some kind I have a different port configured then I used to so it's only okay and I can see I already have my schema here I have a hello word here and I can see I have a non malleable string because I actually enabled non audible string support so basically nullable reference types in my project so I can now explore my or fetch my data here by just typing in the query that's that and I basically get hello world hello Mac but that's not actually awesome so let's make it a bit more difficult so we talked about Star Wars the whole time and we had those characters so how about setting up character and do some props in here like an ID and a name Luke Skywalker and then we basically say get character here corrector and there's no longer returns hello a word it now returns as a character okay let's see if the compiles it does hey I don't know what run is also up again we refresh our schema and we can see we have a new fields called character and we can also see that the schema builder inferred also these subtypes so I have none other character here I have no no the int on the character that's the idea and have the name and I actually can just cry before it so we go here and see that I can just touch the data so it's it's really pretty simple to build up a graphical API because I can use c-sharp but there are two ways actually to build Blackwell api's I can use this c-sharp driven kind of way to build graphical api's and I also can use a fluent API with Rafael like if you don't have access actually to the types you have the types may be in a different library you don't want to mix up Rafael and and your other library your domain objects or soft agate then we also have a fluent API is to describe these types more so let's add back to our next slide this is basically how we get our hello world started okay okay awesome we build our first dotnet graphical server and it worked so let's move on so when we show people how easily they can build a graph query service by just building up some types and they see oh and quickly started with it but then they come back after a few days most of the times and say okay I have this entity framework here I built my dbcontext up over years it has 500 types and how do I expose it over Groth Kurth and there is really one of the most asked questions so let's explore a bit what we can do in these scenarios and let's head back into a code because I think that we all understand that best okay for this demo I actually am using a Microsoft demo it secant contours oh you need them or they use that on a demo on the documentation side to explain how to use actually entity framework together with a speed or neck or and we are going to use that same dbcontext for a graphical serve so let's explore what this project is about this is actually a stuntman it's been a core project again let me just before we head into the same problem again don't man watch run see and framework everything is set up correctly it kind of starts okay so these the stop and start ups yes it's a standard it's been a core project i preset this up so if i go in they start ups file i can already see that I have a DB context in here at the school context basically from the controller Union we will walk through that in a minute and I have here already a schema builder basically that just makes a new schema that's invalid because I don't have three types but bear with me and then I've already set up my middleware pipeline I have graphed weather near a fruiting in here so basically a standard graphic we're just basically a standard asp.net Coursera and then I have also here a function that I wouldn't put that in protection but that actually it just initializes my TB context with some random data okay so let's have a look at the DB context that is basically stun that he F core the be context I actually have some Michael came in zoom in here again again yeah thank you it's some kind somehow resets every time I close it down but okay it actually exposed again some DB sets here like students I have enrollments I have courses so standard standard dbcontext also we have relations like for instance a student has many enrollments and an enrollment basically connects the student to the course and from the other side the course has also enrollments and connected to students and also my enrollment basically holds the grade of the course if I look at the entities they are pretty simple using attributes here to annotate that they're auto-generated IDs and stuff so basically what you expect so let's see how we can make that work with math class so in graphic where we are starting always with the route type so we would start again with a type that is called maybe query and we would actually then have to have some field so let's first start with a simple field maybe we have a variable here and that exposes us as students and we just call it gets students and we actually need something here we need a service to get us the DB context so we can say service and inject me into that function actually the school context that's my contacts and then let's naively just return the students here okay that might go wrong with a big database but let's start with that and we can just add that here to the query type thing the query and let's see what our okay that's not good let's see what our server does okay it's recompile everything is fine we go back and heal we refresh that it already says okay characters no longer there we can't see students is that all that's cool so we at least have to the schema here we have students it's inferred we automatically have a schema here and we cannot see see that we have enrollments here and we're not digging to read more enrollments I can see okay there is an enum great with all the grades that I have ABCD how the e is missing but don't mind and I also have like I could drill into the courses and can see all the relations are automatically set up so let's create that the point of that let's write students and that's fetch maybe the last name and maybe let's fetch the enrollments and maybe I want the also the course so let's fetch the course and get the title okay that some kinds see me good because we have the last name but we don't have the enrollments okay so let's see how we can make that work better because just like that the graphical engine just understands that this is an object we return that but it doesn't know how to dig into data so let's get back to that so we have concept of middlewares and if you are using the the pure code first version of hot chocolate then you can use attributes and these attributes are actually middleware so I could annotate here that I want to use selections and selections are actually a way to teach graph well about of projections and this doesn't just work with entity framework it works also with normally be with any that's driver that supports iqueryable so my server should have recompiled and let's just really fetch that query again and awesome we basically now can drill into that data and like we could do in c-sharp code but now we can do it dynamically and if we look actually at our console we can see that the graph query is rewritten into one SQL statement that is processed by entity frame X so we are fetching basically the whole graph in one go but that's still not awesome because we would be dead if there are more data sets in there than just a few so we have no sorry thanks so we can actually go in again and say use paging so that we can page and let me just forward we have fast forward here we also have more middlewares like we could say okay this end endpoints actually also filterable and actually it's also saw trouble sortable so we have a use paging use filtering useful take new selections and the order here is actually important that's put this here because we if we do the projections first the data set would be cut the fields would be removed so we have to have that basically first I will explain that in a bit more so let's fetch that again but it would say oh that doesn't work here anymore there's something wrong because actually since I put paging in our data structure has changed because now we have a few nodes which would cover our actual object and I now also have here like paging information like total clown I have a page in for which page I actually fetched me Thursday again and I get my data mech and I can see now am I on my field here get that and I now have a lot of arguments here I have a first I have a last I have where I have order by so let's write something out with it so I can now on my students can say where the last name is foo and actually where actually I want the only the first item first okay and then I would get the person foo and that's just one fool in the set but I also would only get the first item in my set and if I now look at my SQL I can see that I actually also translated this into one SQL query that fetches my data and we also have these noise parameter so that the query can be optimized by the SQL so okay so I you could spend more time on that but time is short let's get back to our slides and next time and remember to make the font bigger so with with the hot chocolate you can bring in any project that uses a variable database driver and we actually enable you to plug them just in we infer your schema and we can basically rewrite your graph work very into a one SQL query and you can even combine that like you could have multiple data sources you have something that come from their server some things that come from other data sources and we will arrange that and fetch the data for you from the various data sources in an optimal way and this doesn't stop actually with like variable we are working on more database support so some of our contributors are now working on neo4j integration and there are other things coming ok how does it work actually we saw this middlewares and I said middleware order is important and that's because middlewares form a pipeline and basically each field in graph well can have its own pipeline so we saw i'm was putting attributes on this field and by that creating basically resolve a pipeline that were then able to understand for the graph of what the variable is and it was able to apply sorting filtering and even to slice the data and it's pretty easy to build your own middleware and reshape our data processing works but let's not stop here we have a few more minutes so let's make it real time and I promise you it is as simple as doing simple queries so let's head back to the last demo for today and I hope I actually don't forget to make a big again right up okay it's starting up so this is again a standard graph standard expect on a cross server I also prepared it with a schema and we have here he I'm actually using fluent API for instance to a have a very time yes I that I won't forget but I forgot here I have again simply prairie type and I have filled some that has a constant return value okay so let's get a view tire real-time operation type in here so we wrote always a query type to do the simple fetching and for this demo one we start with the class that is called subscription and actually in graph query subscriptions can be expressed in various way one of them is to just have an async function or an ethic nursing method that returns an async enumerable and that's it new that is a new type that came with I think they're gonna call three and let's start with something simple let's put a string in here and let's call it on messages I think okay and what our type does is actually I prepared a few messages it will yield back some strings and then delay and view the next string basically it's a it's a finite message stream and to explain to the graph my engine that this is actually not a standard resolver it's actually a subscribe subscribe and resolve resolve them we put that at this every bit on here and then we basically go up here stay add subscription type and put subscription on okay so let's run our demo watch okay coming up let's get back to our graph Milani refresh that okay it has the new schema we can already see we have our some field here which is a static field and we have our message field here and we can see that our message is actually a swing not an enumerable off string because the innumerable GS in the number is actually our event stream and if I now write out what to do a subscription and do this on messages here and subscribe to that I have to get my hand a message now it's world and now it's good bye though it's pretty simple to get a stream in there because everything that you can expose as I observable as a Singh in a movie or even as an ayah number can be used as a subscription but let's try to fit in the last five minutes in more complex example let's have a mutation notation where basic we have a method that writes a message to our back-end so we get a message in and it actually is an async yeah stank and just to get it started we return the data that we actually produced so the graph let's have a quick very that and then we need something to send the message to because we want to have a subscription that basically exposes these messages so but somebody can subscribe to our messages that we send in and for that we have something that is called the topic events enough and that basically an abstraction for an in-memory bus you can have also a Redis bus that uses the same abstraction but I'm in this same example use in memory cube so now we can basically take that event center and say okay I have to I have something a payload to send to you and that is for a topic and the topic is just called messages you can call it anything so you can have dynamic subscrive ends in our case we have a static message and we send message to it and we await that okay and on our subscriber side the use of the new task here we now don't have a static stream like we just had and now let's get rid of that we now have inject also a service here and that's called the I topic event receiver and the event receiver maybe won't like that event receiver can now subscribe on to a topic called message and let's get rid of the SOP and basically return our payload you like it oh yeah and actually it's not an air ace in the numerator in that case it's an IE n stream and event stream basically implements is increment so let's start that should should build but we have forgotten one more thing okay let's see doesn't come up should compile don't that run okay still a problem with one of the services a topic event sinners okay and our topic event receiver this should actually work the day in memory queue maybe the bucket the old-fashioned way okay we have an exception little errors I even stream subscribe method okay I think it's hard to debug that in one minute but it actually would work this way and we actually have these topic events receive us here but I somehow missed some messed something up in my setup here so let's leave it on that it's pretty easy to do that and I actually would see it I think after the talk but let's head back to our slides okay so awesome we built a lot of demos today and explored what graphical is we actually what you can take away here is which graph layer you can iterate much faster and because you don't have to change over at the back end and the from the end developer can basically drive how he wants to fetch data and then actually allows the consume of the API to optimize the data fetching for their use cases and it also simplifies how we fetch data and allows the server to optimize data fetching in the backend by using things like data loader let me also give you a quick outlook how a project is going full steam ahead and we are soon releasing strawberry check which is basically lays that graph Square client it's not only for Blaser dotnet broth correct lines it works where was layer blazer we originally thought to release it in May but it's coming out in June and also the tooling that you saw here like banana cake pop which is our graphical IDE is free and open source and also we have integral integrations into Visual Studio and hope to build also integrations for writer and we are also and I said that in the beginning working on a gr PC integration for graphical and if you want to dig in deeper into graphic where there's a good book by Mark Andrea he's working at github and one was basically one of the first people who apart from Facebook built a big graph well at API and he put all the knowledge that he acquired over the years into that book so it's a people book if you want to find us we are on Chile cream dot-com or you can head over to our github repository and I'm open for questions all right first of all Michael thank you for a very very interesting presentation showing so many things about craft QL and hot chocolates thanks for that yeah you're like I think there's one question that a couple of people have been asking and that is how the graph QL and OData compare and where would you use them would you still use our data would you always go with graph QL so I think that they are fundamentally different like with graphing I didn't show that you can it you can do much more complex data like you can write it write a single query and then you can defer parts of the query like where you say okay this dot this data is actually more important so that you get it directly and then did you defer other parts and Facebook is actually doing that if you get if you are opening up Facebook then you see the new stream immediately but the comments I actually deferred and it is built with a different mindset who'da it has more I would say I think it has a database a database abstraction layer of over HTTP and where graph where was built for API so it's to expose your business layer to the word make sense I think tacking on top of that business layer on question that came in also a couple times is related to doesn't your back-end code get too complex if you support all of the graph QL freedom in query no actually actually not it's it's actually quite simple to expose your data and to secure it like there you could opt into very default rules like you could use persisted queries for instance we are actually doing development time you allow all the freedom to your depth but as soon as you hit the publish button you are only allowing persisted queries that means no one queries to the server and with that you can actually quite cheaply and make that very simple and very performant and there are other techniques like cost complexity where you can say okay and that's actually what github is doing they're allowing a cost of one thousand for instance let's say that and they are giving each field a weight like for instance a field that fetches data has a higher weight than just a field that exposes a simple in-memory stuff and then you are only allowed to fetch queries that are in a certain range of complexity so they are tools for that all right nice another one slightly related is how do you deal with API contract changes in rest you typically either at media queries or something like that where you have a media type or a content type that is being returns how do you handle changing shapes of the of the domain that you're exposing over craftwell so it was a question about versioning or media types because there are different things I think a little bit of both like how do you handle fields being removed or renames and things like that so then it's actually working more like in c-sharp because growth girl has a technique to deprecate fields and then you can introduce new fields they don't have concept of versioning because say because version a actually always introduces a lot of complexity and Facebook has a huge schema of over 10,000 types and 300,000 fields and actually they they prove that this is working better at scale them with us than that versioning concept and what they are actually doing is they deprecated fields but they never really remove them because they don't want to basically break applications that are already deployed like maybe in India you know there's some person that has very old mobile device and still runs a very old version of Facebook and that should run so their approach to that is different than to room and rest all right I have two more questions and then I think we'll we'll have to wrap up first one is about authentication in authorization so how do you authenticate the endpoints that you have in craft QL and adding onto debts how do you do resource based authorization where for example some some yeah some entities may not be visible to a certain user okay that's a there are good questions so the authorization actually is out of scope for graph well in this spec so the specification just bother about it but Facebook for instance at the the authorization should come from the business layer so the business layer should expose basically what's possible we on hot chocolate also integrated the authorization policies that you have in the asp.net core so we allow you to do all validation let me just show you how that works and John go to these LPM api reference and basically you can annotate the fields very easily like that's half a look like you basically have some kind of an authorized attribute or in the fluent api if you use a fluent API of us you basically have an authorised extension field or if you're using even STL first draft query syntax you could have an authorized directive and you basically can either use roles based authorization on top of these fields or you can use and that's personally what I do is using policies and these policies are very powerful because we are exposing the graphic where a field context to the policies and you can write very complex authorization policies that are decoupled from the actual graph query code so you can test those separate from each other so that's a powerful concept and it's basically we are reusing microsoft's policy based authorization here and there are eight slots to read yeah so everyone just google hot chocolate in graph QL and check the docs there because apparently there's a lot of things in the framework out-of-the-box one more question that we have is how did you actually come up with the name hot chocolates so actually it's a bit related to my son my brother was at Starbucks and my son is actually was three years or throw back then and he was very keen off on hot chocolate so every time he woke up he is waking everybody in a house app to get his hot chocolate so then my brothers say let's take that as a name because it's it's funnier than to call it another graphical net or and draft weather or something like that and people will remember that cool let's see all right then I again want to thank you for your session just now and then let's switch over to my screen again and yeah wrap wrap up the dotnet day's online you

Channel: JetBrainsTV

Views: 13,357

Keywords: software development, developer tools, programming, developer, graphql, graphql for asp.net, asp.net core, HotChocolate, jbdotnetdays, graphql api, REST, hotChocolate, hot chocolate, asp.net, Michael Staib, entity framework, webinar, rider

Id: Yy9wOhiWBJg

Length: 70min 8sec (4208 seconds)

Published: Thu May 21 2020