On .NET Live - Creating GraphQL APIs with a little Hot Chocolate

[Music] [Music] so [Music] do [Music] [Music] [Applause] [Music] [Music] and we're live hi everyone welcome to this week's on.net live my name is celcilfo and in today's show we're going to learn all about how we can build graphql apis with a really cool project called hot chocolate and i have my friend michael here with me he's going to tell us all about it so michael what do we start off with you just introducing yourself really quickly and letting folks know who you are where you're from and like what do you do yeah thank you seth um i'm michael stipe uh i'm a microsoft mvp and i'm one of the authors of the hot chocolate graphic library for net so i'm dealing with graphql on a daily basis and i'm doing that i think for the last three years almost or a bit longer maybe nice nice and so we're gonna dive into like what is graphql and how we can get started with some of these things using like blazer and asp.net in the back end but first i want to go through a few quick announcements that i think will be really exciting to share with folks so what i'm going to do i'm going to swap over and i'm going to share my screen really quickly and we're going to take a look at some of these things and i think my screen sharing there we go all right so first announcement that i want to make today um some of you may or may or not have heard this but yesterday dapper the distributed application runtime um our open source project for creating uh microservice like applications went v1 officially yesterday um you know for so for those of you that are interested in building microservices and you know having some built-in conventions and patterns you know this is a really great project for you to check out um head over to their blog post site i'll share this link in the chat but this is a really good blog post that talks about you know some of the folks that are using dapper some of the scenarios it covers um and some of the big features that you know you should really pay attention to for v1 so definitely go ahead and check that out if you're interested in building like some micro services things another thing that came out uh yesterday as well yesterday seemed to be like a big day for announcements uh another thing that came out yesterday was preview one of dotnet six i'm really excited for this one particularly for the blazer stuff that they have going on so if you scroll down and you check out some of the things that are released inside of this first preview you can see them talking about things like you know.net maui blazer desktop apps and then there's even some mentions of some micro api things that they're planning for asp.net core so really interested to hear about that and seeing um how that progresses as you know we're on the road to net six right now and last thing i want to mention super quick um dot net com uh focus on windows this is happening next week february 25th and you know just like some of our other focus events for dotnetcomp this is going to be primarily focused on windows so it's going to be like those really short you know 30 25 minute sessions featuring folks from the community it's all live it's all free and um and all you got to do is kind of just head over to this website and just show up like you don't have to register or anything like that which i think would be great so again this is dot net com focus on windows um again if you're interested in learning about building desktop apps with uwp wpf win forms and other things this would be definitely something great for you to check out and with that i think that's about it for my updates for today i'm gonna stop sharing my screen uh michael what'd you think about some of those announcements man like are you it's great that you're looking forward to for 4.6 yeah i'm really psyched about the blazer stuff and that they are finally moving to the desktop so you can reuse all the knowledge that you acquired starting in the server then you moved into the browser with the web assembly stuff and now you finally go on full circle onto the desktop so i'm really looking forward to that yeah i think it's a really interesting use case where you could reuse like your web skills and build all different types of applications with them from like web to mobile to you know browser-based things um you know i think it's good for us to you know be lazy developers a little bit right and kind of rinse and repeat our code around the place so i think that's really cool yeah and i think that was really missing from the net um platform to have something like we have we are in javascript we have react and react native but this this full circle framework was missing from the net so far that's really great that they finally got around to do it yeah for sure for sure and speaking about blazer too i know we're going to talk about some blazer things when we start diving into hot chocolate and some of the updates you have to share but yes i kind of want to start off with asking a question i'm pretty sure you've heard this question a lot but in in 2020 why why is it that people care so much about grafki well like what is so special about you know this new way of building apis that's really attracting developers to use i think it um it resolves a lot of friction that you had with fetching data so if you think about traditional technologies like rpc so or rest it was always that the the backend developer really planned ahead of time what the end developers should be able to use so all the requests um that you were to use as a front end developers were planned and already there and as your screen size changed or your use cases changed for your multiple applications your demands really changed and with those pre-planned apis you kind of were stuck in those cycles okay i haven't now changed use case or i have a different device now so i have to go back to the backend developer ask for changes and then you have all those full cycles and misunderstandings so with graphql we finally changed that and we changed the perspective that you had at the front developer that you could craft your own requests ask for the data you need and i think that resonates with a lot of developers and it's not only a great thing for from the developers it's also a great thing for the backend developer because the backend developer can finally really mold with a strong set of api that apis that is enforced by a strong execution engine how the front-end developer really can explore the data so i think these data graphs offer a lot of opportunity for the developer community and that is why they yeah really attract so much people and um especially in net we are getting more and more of those features that javascript developers already had for a long time i mean if we look at what we have in the node ecosystem we only catched up i would say in 2020 to the feature set that they had so for as net developers 2020 was a great year with graphql nice nice we're really glad that you're here to work on this project with us um one of the things that i kind of think about what i hear people talk about graphql is you know it gives us the option to kind of control the story of our schema a little bit more from the client perspective but even from a backend perspective too it also allows us to bring together a lot of different sources of information right so i can connect directly to databases or i can connect to um you know other graphql things or other sources of information which i think is great because often we hear the story that graphql is like a replacement for http apis but you know as i look into it a little bit more i kind of feel like it's a companion like we use them together we can build on top of each other to make like a really cool experience do you would you agree with that yes um so if you look for instance at facebook and facebook is the inventor of graphql as most people know they internally use graphql but externally they actually use something called the facebook graph which is the rest api and there are other companies like github which use their v3 api is rest and they have additionally a public api that is graphql so um if you can i would always suggest to cater multiple needs and um yeah graphql is a great thing for that because you might have starts with your set of rest apis or data apis and then you build over these your new graphql api and essentially start with the set of rest apis or other technology that you have and build over that this nice layer of graphql apis right right and i just want to look in the chat here really quickly and coming in from youtube we have rick the clipper and rick is saying michael may i suggest that you focus on the benefits of graphql in a third world internet as we have in germany um and i guess he's kind of talking about some of the the performance benefits um that you can get from graphql right because you can control the payload so to speak you know you could really optimize like some of those messages that are going back and forth yes that that is definitely actually where where graphql came from so originally facebook um back in 2012 when they first introduced graphql internally they um started to work on that especially because of those things so essentially graphql was developed for mobile applications facebook's uh set of mobile applications that really performed very badly back in the day so graphql because you can pick and choose your request because you can ask the server for what you want you can optimize your request and you don't have those problems for over fetching or under fetching where you pull in too much data because one of the rest apis that is there just forces you to consume more data than you need um yeah and i assumed most people here are already familiar with this uh concept of graphql but yeah it came originally from the the um from the way to optimize uh data request or fetching data but i think today it's not only about optimizing your communication and reducing those those requests that you have it's also about that you can put a lot of aggregation logic into the server and also that you have this strong predictable data graph that you can query into and it's it's really a joy when you start the first time with graphql and you start consuming uh data through graphql how you can drill into the graph how you can explore the data that a backend offers to you so it's not only the benefits of fetching data more efficiently it's also how you can explore the data and what guarantees the server really offers to you so from a predictability standpoint and i know with graphql it's like you said it's more than just querying data but there's also things like subscriptions and real-time communication and mutations and like this there's tons more than just i want to aggregate some information and like pull it back in an interesting way right exactly and we will dig into a ton of these things and also from a blazer perspective because i think that is where we can offer uh with the next release of strawberry shake a lot of benefits that we haven't had in the community so far so i i gotta ask you this i i have to right you the name of the project is hot chocolate you have another project called strawberry shortcake for blazer and you also have banana cake pop like where do you get these names from like how do you get inspiration to name your projects after food actually it all started with a hot chocolate which uh we had kind of a stupid name in the beginning and i don't know anymore how we caught it but maybe if you go into our first commit on github you see it yeah okay so um my brother was standing kind of in starbucks and because my son was back then i think three years old and he always wanted to hot chocolate when he's in starbucks and so my brother said let's call it hot chocolate it's a funny name and uh will be will stand out more than just naming it and graphql or graphql.net nice i love it man i'm sure everyone appreciates like the names too like it's really cool um why don't we what do we kind of dive into some of the updates that you came in to talk about today um why don't we start with like let's let's let's start from the front and go backwards right so how would we start with some blazer stuff and talk about how we could start consuming graphql endpoints from blazer and then we'll dive into the server that's awesome because i think the most you appreciate graphql is when you really consume it and that's why it's actually cool to start from the front end and really explore what the benefits for for the consumer graphql offers and then you see all the benefits for fetching data in a much different way than before sure so can we share my screen yep screen's up awesome so let's start on the console we start with visual studio code i have lots of ides today but let's start with my favorite one and let's really head in so this is a simple blazer example it's an example that i actually showed off in a lot of talks when i talked about previews of strawberry shake but and now we see uh really all the work that came together since the last preview in august and i think this will really bring a lot of benefits from the javascript world into the dotnet ecosystem so first let's just run our little shell here to see what we are up to so this is an empty chat application what we are building is essentially um a slack clone not so fancy like slack but a little bit so you mean i can't start a new business like a slack competitor using this demo or team's competitor we don't know yeah no i'm not that good with design um and it's not as feature-rich as both of these products uh but let's just just uh try to build something fun and all of you can help me later you can send in messages when we are a bit further along with that so we have a welcome stream and i just introduced that today to show off a very cool feature later um so it's kind of dumb now but it will make sense later so essentially we have a welcome screen we can go to our chat which is empty um because we we are going to build that together okay so this essentially will be our shell it's nothing in there yet and we will build that all together so how do we start with graphql or how do we start with such an application so the first thing is we need kind of a model to work with and to explore the model we actually could um pick one graphql ide and first look at the server what data the server offers to us so in this instance i'm using banana cake pop that's our graphql ide and i'm going to my demo server here that's my chat server and we can essentially look at our schema so what do we need for a chat app if we look at something like slack let me bring that up here oh yeah coming up we always have this sidebar where we have interaction with others we have channels and maybe we have users that we can talk to um and then we have this uh middle area where we have all the interaction we have a chat uh we have an essentially a message window where we can type our message and we have all this message streams that we can listen into so the first thing we want to do is essentially just build out the left-hand sidebar where we have all the users we can chat to so we have a couple of ways to do that we could either go to the currently locked in user here me and query it for all of the threads this person has and then could drill into this notes field here which offers all the person that i have this notes field here is part of a paging api a cursor-based pagination we will not go into that so much today but just that you know that it's because of a paging api that it's called like that okay there are other things we could also directly query all the people on the server and we essentially could drill in here into our nodes field directly and get the same thing that we could could get through the logged in user we also could grab other users from the server and drill in the same way so what we will do is just grab this people people field here and we're from there in to get our data so how do we write graphql queries in our in our visual studio code client so the first thing is we need a tool and this tool i just restore it here's the strawberry shake tools and it integrates with the net console so we do net to restore i pre-installed that so i'm using here a preview 57 we already have a preview of 58 online so if you want to try that out you can do that with a newer pretty okay so i have restored that and now i have a new command here that is called dropback graphql and i essentially can grab a graphql um just let me get back to my url here grab that put that in so i essentially can put in a graphql url here and then say uh i want to name my client the a specific way for instance chat client then i hit enter and what happens now is that we are creating a graphical config here and we are also creating a schema here and a schema extension files here i walk you through these in a bit so the graphql config file just describes okay there is a schema file here and then there are lots of graphql documents you could specify a filter or a list of filters here um to define where graphql files really lie um so for us this uh this glob here is sufficient because it will cover all the graphql files that we have somewhere here we also have a refatch url and some generation options here to generate also dependency injection code and stuff like that okay so the next thing is that we want to start writing code so we go into here and create a new file for instance we want to grab all the people we can um can chat to so we create a new file called get users.graphql okay and in here we can start writing our graphql query you could start for instance by saying we want to do a query so the keyword query then gets get users and then we could look at all the things we could query and you can see here the intellisense already popping up and that's because of our graph configuration that we have here and the schema file that we downloaded so visual studio code now has all the information about how what our graph exposes so i don't need to go to banana cake pop to write my query i can just do it here oh that's that's really cool so is that because of that graphqlrc.json file that you generated yes so we are integrating um with these uh standardized configuration in the graphql environment and we actually installed uh the graphql foundation uh extension here and that just picks up now this uh this standardized way to define graphical queries it's essentially the same way the javascript environment does it so everything that you use in javascript in your javascript development will work with our tooling and that is really nice for visual studio we are working to bring banana cake pop into visual studio so because that doesn't have good tooling at the moment we're working to get a banana cake pop in there and we are also working to get it into visual studio for mac it's not in there yet so we are still working through getting this new release out but for visual studio code it's already awesome because graphql foundation already has a nice plug-in for us that we can just hook into okay so let's write our query we have this people field that we want to grab and what to get into and we are grabbing the notes which essentially are all the people that we want to grab so what we can do here is pick all the fields that we need and i know already the fields i want to have for my component it's essentially the height b the name the email actually we don't need the id we just need the name and the email in my example and then we need an image ui if the user has an image we want to show it we need the last scene and we need the s online status so if the user is online or not okay this should be sufficient for our um for our first request and for a component that we have but we actually want to do something else here to have a nicer c-sharp type we want to actually use fragments to define more how our classes are shaped so fragments are essentially the our primitive for composition in graphql and we can essentially uh generate from these nice c sharp files so classes interfaces and stuff so we are creating this fragment here and we are calling it a user and we are applying that on a person because our type actually is a person in the server but in our domain and our problem domain we call it the user so what we are putting in here are these these fields okay so then would you say that fragments i i'm just trying to put it in to other words what fragments are pretty much just ways that we could shape the data from the store so let's say person was an entity framework thing right like user could be the shape of the data that we want to have returned from graphql yes it's uh essentially like that so user so and we could also reuse the words and i will use the words entities in a in a bit because essentially person is an entity in the back end and um user is just a view on this entity a specific view on this entity and we we will even shape that further as we uh build out our component here so but let's start with this very simple thing and let's just compile that and now source generator kicks in so all this is built with source generator we yeah specified ah okay so now ask the tiny issues so usually we should infer from the from the project the namespace uh with laser projects we still sometimes have a problem so we can also override the namespace here um let me just grab the namespace what is okay we call it demo let's put that in here and then while you're doing that we got a couple questions that are popping in on chat and i want to make sure that we we jump on some of these before yes um so one question we had um come in was it says i'm a new main graphql is graphql hot chocolate implementation connectable with entity framework core yes it is and we we see that later when we build our server we actually use entity framework core but it's also working with entity framework and there is a new integration coming with the 11.1 release so it works natively with mongodb and not over iq variable but over the native query language and there are more things coming like elastic search support and other data sources within your releases also cool but we'll look at that as specifically at entity framework in our server demos okay so now we generated all the things that we needed we um actually have now here generated code that represents all the client code that we have we just put it here so actually we are using source generators but many of the ides have still problems to read the generated source from the in-memory workspace representation so um what we figured is to just put it somewhere you can switch that off if your ide supports reading it from the in-memory workspace of rosslyn if not you have just for the just for the ide some kind of a code representation here you can look at the code you can debug it through the code so it's just for help so actually underneath it's directly injected into rustler okay so with that we have some generated code here let's have a look at our components so actually our blazer application let's have a look at our router here has two pages so in the router we have uh just set up some basic things so that is actually when you create the default application you will end up i think probably with the same same router here so what we then have are two pages one is the index page which just has a link to go to the actual chat client and then we have the chat client which only has a component main in here the main component at the moment is completely empty so in in blazer or in spa applications we actually have this comp this concept of smart and dumb components or you could say about these stateful and stateless components so essentially what we do is aggregate data or we have all the interaction with our data sources in the state full components the stateful components press the data down the component tree and if the state list components that are further down the component tree want to interact with data they do it through events we will see how that works in a in a bit so our main component is for us our smart component where all the magic will happen then we have here two categories of i would call them dump components you could also divide that up differently you could have multiple stateful components it depends a bit on your layout okay so let me just enable this set that represents our our user list and walk you through that so the people list is essentially our root component here that we will put directly into our main component it um at the moment has here some code that if this component is loading it will put some placeholders in it also has an understanding of what the user is and actually this user is some of our generated code so we don't have to do anything we just created our graph the query and we already have the user type that i need for my component okay let me go back um i also have a callback here so if i click on a person i will get an event that i can catch in my main component and then do something with nice it looks at those you know that file that you essentially wrote that graphql file and it generated all these things for us yes so essentially we generated all the um client entities for you or actually these are just our models but it generated entities we will look what entities really mean in that context as we build our first request in because there are some nice concepts around that but it generates all these types and all these views on the data and we can just use it in our components we could even say that we are writing our graphql queries especially for our components so they fit our components and just fetch the data we need for our components and that's as essentially what we did with our fragment it was essentially written to fit this component so we have all the data to fulfill this component so what we are doing here is when we have users we essentially iterate over them and then create more components this person this person component here which essentially then uh displays a user and you can see it takes from the user as a state it uses the field is online it uses the name all the things that i sp that i define actually in my graphql query i used in that component you can see that there's a name there's the is online we used here we have the last scene date so all the all the data we are using out of this fragment so this fragment is actually the input for this component okay so so quick question for you then so as as someone that hasn't used graphql a lot i'm kind of wondering who's responsible for creating these things so is it is it the job of the graphql um server side to provide these fragments or does the client is the client the one that generates these fragments are now consuming these things on the client side or does it does it does it not matter so the these fragments or this query document is written by the consumer of the graphql endpoint and is written for a specific use case you can and we will do that in the in the second part we will build out more fragments that interconnect and then really see how powerful these things is so this is what the user writes so essentially you are writing your own interface between the backend and user and your client application this all will become our interface between our backend and our client and it also defines the shapes that we want to use in our components yes it's almost like the client is creating its own api client essentially exactly yes these are the these are the types that i want to consume and this is how i want to consume them and so i'll define that and i'll point that towards that graphql endpoint and then it'll generate this these types for me that i can start using inside of my application that's exactly uh and that's exactly what i mean with it removes the data from the friction of fetching data now because with rest we would have to take what is there or go to the backend developer and ask for the specific request just for our client which the backend developers most often don't want to want to give us but now i can craft that exactly how i need it and that's uh yeah that's a power of graphql cool all right that makes sense okay so we have built that in and that works now kind of and now we need to connect to our client reading so let me just put in some imports for new components that we have there so i go to this imports razer and that's where essentially you can put in the commonly used namespaces that you use throughout your application so i'm putting people in here so that i don't have any usings in my main component and now i essentially could put in my main compo and my people list component okay but i need some inputs for this component let's put this people list component on this side and have a look at all the parameters that we have here so we have is loading indicator that essentially is used to define if our component is still loading data or not we have our click user here which is an event we need to consume and we have our list of users so how do we get that so in order to use our graphql client we need to inject it so we can kind of say inject we call it a chat client and let's put a variable chat client here so essentially we are injecting the chat client into the variable check client here and now we can kind of query data from it so what we are used to in the dot net world is to essentially do an execute and fetch that but we looked a lot of the the other javascript words javascript applications and how they actually fetch data and more often you actually don't want to just fetch data you want to kind of watch data so we put the watch in here and then we kind of subscribe onto that hold on so you're telling me on the client side essentially i'm doing like a like a publish subscribe so i'm listening to some query endpoint and as data changes or gets updated it gets pushed to it is that what's happening here uh kind of so what strawberry shake is it's not just a client it's also a a store a store for your state and what this can do we will see so the cool thing here is this fully integrates with a system reactive so all the nice work that microsoft did around system reactive can be used here so you can replay those changes and you can listen to changes of your entities so we are actually listening to uh changes to the entities of the user or not of the user the user is just our shape but we are actually listening to you or we are asking for data and then we are listening to changes on this um on this people entity so let's see what that actually means so what we get here is we watch our store and then we get result and whenever this result changes and this is essentially a standard graphql result that we also get with the execute but we always get it when it changes or when one of the entities in this result tree changes okay so let's grab the people field that we actually consume and get all the nodes and put the nodes maybe on a little field here so we need an i read only list i think of users and let's do it let's let it be an empty array at the beginning and as soon as we have data it will be updated by this so and whenever we update we actually signal to um to blazer that our state has changed that will cause the components to re-render so the second thing we need is the is loading indicator so we have here a bool which is is loading and that is true and when we essentially have the first set of data we can set it to false so we are not anymore loading and this we can essentially set into here we call it users is equals our users and is loading is our is loading oh sorry and then we have also our click user which essentially is our event that we want to raise so we have maybe private async task one click user which has an eye user as an input that is our client object that we want to do something with whenever somebody clicks on it okay so for now we don't put anything down there we just keep it and be happy so this should already be working we just have to set up some dependency injection magic in our program cs so essentially in blazer you can set up all the services that you need in your program cs so we go in here go to the builder say we need the services we say add chat client and all the dependency injection code is generated for us by our source generator that's really cool i like that so it's it integrates neatly with all the other services so the next thing is we need a transport so let's put in an http client services at http client and you can see i already cheated a bit so up there we have a token that i just put statically in there but it is enough for our little ammo here so then we say okay we have a client let's put that just together and then we can explore the interesting stuff new ui that's where we put our ui and default request headers authorization our error token and let's see token we have up there okay so let me just grab our graphql ui here and let's run that this is running yes so let's go to um microsoft edge here just paste it in we get to our empty page then we can go here and we already get our data so what i want to show you here so that's simple nothing changes it's it's essentially what we get with execute so let's have a look at the developer tools here and at our console so at the moment this is not an optimized behavior so if we go back and go back to chat we can see that we are every time we are going here we are essentially doing an http request but i talked about stores and about state and about this watch so what does it mean so if you go here to main we can define the watch behavior so we could say we have a different execution strategy and our execution strategy is to use the cache first that means every time we go here and watch four changes on our store we first look in the store and if there is something in the store we will take that if there's nothing in the store we will fetch from the server and populate the store and then trigger our subscribe here but there's more to that right and then i'm guessing the store just keeps everything in memory right or can you also specify where it caches that stuff like like say put it in local storage or put it in you can also persist your store and that's where we go into optimistic mutations and stuff like that um where you essentially serialize the store because these entities that we store in there are serializable they are normalized so we are uh essentially taking the graph and cutting it down in entities so let me go to this slide so how that works is essentially when we get a response here like this this response is actually um in this in this shape here we have three entities we will cut it down in three entities store them in in the entity store but we also will store the operation or the full operation result in the operation store and we essentially built the operation that we are using or the operation result that we are using in the client from these entities so whenever one of these entities changes we update the operation result and that is when the subscribe is triggered so when new entities update essentially every time any request fetches one of the entities that the other request patches as we built more requests into our client we are fetching maybe different parts of or different shapes of our entities and then these entities update so this means when we build in later the subscription where our messages come in that might transport for instance the username if the username changes and the message comes in all the components that use a message the username will automatically update although they are listing listening to completely different requests and this makes possible to build much more dynamic applications than before because uh you're essentially watching a single store where we update the data in there from different requests that we write got it okay okay so um so now we got this website set up right we got the store set up we have strawberry shortcake is pulling in our information from our graphql server wherever it's listing right now yeah so um essentially what we what we now did you know our store is generated we don't have to care about that we don't even talk to a store we don't actually see that there is a store we just subscribe to our client and beneath theirs it's a store that tracks all the changes keeps track of when data is changed and when we have to be notified when our components have to be updated this is all nice and transparent to us yeah i can't notice like when you hovered over that watch method just now you're using an eye observable so does that mean that there's some reactive extensions things happening in the background yeah so actually just like that you don't need system reactive we have an over we have actually an extension method here but uh we in this demo are using system reactive extension so you could do things like you could you could listen for a certain result that maybe i don't know uh you're saying you implemented these and these are not in system no no this is system reactive this is you don't have to use system reactive that is what i mean so if you just used these uh these two messages watch and subscribe we have them in the package but um if if you have system reactive because system reactive lives in the system name space it will just swap out our comp uh our extension method and then you have the full power of system reactor here got it awesome we don't forget the chat folks um and this person is asking michael how was the documentation for v11 coming um so i know you're working on v11.1 right now we 11.1 so uh we are constantly working on the documentation and it's getting uh progressively progressively um better over time um but there is a lot still to do i i know there is a lot about filtering to do uh it's an endless task yeah do you have um like i know the documentation is on github right i'm guessing it's all open source so if you're interested in assisting with writing documentation and samples and those types of things i'm pretty sure they could create you know a pr or something like that and kind of help out with those types of things yes i mean we are super open for help it's all open source and all the folks that are working on that are really doing it uh mostly in their in their free time um there are some companies that sponsor people who work on that but uh mostly people other core contributors are all uh doing that in their free time um and i want to get to before we move on and this person is asking if the store is in memory how does it behave in a load balanced environment and so this is client application there is no load balancing in the client so you have a state in your client um and the the important thing is as we go further into it you essentially can bring into the store not only the graphql you essentially can extend your schema locally and write local resolvers to bring more data in so you can access your whole state through that but it's in your client session it's a user client session so it has nothing to do with load balancing so i i guess as i'm reading the question i'm guessing the person means if you have multiple front-end servers that are behind like a proxy of some sort that does ron robin or something like that how does that work but like you said like it's in your session right so if if if if caching is a concern from a performance perspective i'm sure you can do something like turn on like sticky sessions or something like that so that decorator cross always go to the same machine or you know if you needed to do those type of things kind of like what we do with signalr for instance yeah so uh just to make clear this is a blazer for web assembly running in the browser it's not blazer in the back end which would have still the same thing because we would run in the user session with all the state but this is essentially a local state so we are not talking about state in the server there are other concerns involved yeah you're right that's true okay so uh the question there when when we can we expect a strawberry shake documentation very soon i will follow up with a blog post i think over the weekend of this new version and then we i know one of the core contributors threats is already working uh also on a lot of documentation we have a lot of design documents that we will publish soon oh great gregor great yeah we got a lot of okay i'm gonna yeah so um just let me restart because i don't know if i've actually restarted it and when we changed so we have cache first here and what that means um is since it said is is essentially let me go back here let's refresh that so we get our new client in here so if we go here you can see http request is done so if we go back and do that again nothing happens because now our store is filled and we set cash first so if the cash is filled we only consume the data that is in our client store so as i said this data can be updated to through other requests that that fetched the same data so from the server entity so if i now get a message that has a recipient on it then i get my store updated here so if i get a message in and i'm not anymore microstipe but mstype then also my data here changes not only in the message okay let's go on so we have our simple thing here it's working it's nice but we need a lot of stuff here in the middle um so what kind of requests do we need to fulfill our chat line so first we need a a request that fetches the messages so if we click on a person we want to see the messages to that person the next thing is we we saw this message area down here in in slack so we need some kind of a way to write a message so two requests and last but not least we need a live stream of messages coming in as we receive messages uh hopefully hopefully from one of you guys later so we need three kind of requests so let's head back into our uh query into our query documents and build some more query documents so let's just create a new query document and call it get messages and the nice thing let's just move it down here and the nice thing is that we can actually use everything out of this document so all the fragments that i have here i can share essentially what we do is we merge these documents and then split the parts however they are most efficient to send to the server so although you can write multiple documents you can use all the fragments of the other documents so let's pull that next to this and start writing our query so get messages is the operation that we want to have get messages and we actually want to pass something into that and graphql has a concept of variables and that is essentially translates to parameters in in c sharp so you could see that that is our method our message get users our method get messages so we can put in the uh the variable email that is essentially the identifier by which we want to fetch our messages so we say this is a string it's not nullable and then we can start on fetching data so we can select the person from which we want to have the messages by email and this guy okay and then essentially we actually don't want the person we actually want just the messages okay and again we take the notes field here and now we can see this is actually a message that we want to fetch again we take a fragment and describe how our message looks like in our user domain so we do a message on a message it looks a bit funny but uh it it you will see why it's useful so what we want here is maybe the id we want the direction we want the recipient we want the sender we want the send date and we want text so what we can see here that actually recipient is a person but we don't want to have all the data of the person we actually just want to sub that and we call that subset a participant so this is a different shape of the user we want to look at so it's actually just these three fields and because we have now this nice fragment here we can actually tell our user fragment to use the participant fragment let's reformat that and then we can actually use the participant fragment it's already showing me that participant fragment here so it knows that we're merging these documents and so i can use it for a recipient and participant and then i'm also using it up here so i have a nice data graph but i actually could just compile that stuff and get already my next set of generated you see there's more code coming in and if i now go to uh i user this guy here i can see that user now doesn't have all the fields anymore it just has the fields that we specifically are defined here and then it implements a participant which has the other fields down here so now my user is usable in all places where i actually want to use participant in my component and i really have this control over the generated api that i have so with graphql and these fragments i really can control how my models in the client are generated okay so this is two requests i said we need three requests so let's just duplicate this and say we need a send message that is my next request and it essentially is a mutation we call it send message and this also has two variables here email which is a string and it has a message or text let's call it text which is also a thing i hope you can all follow and essentially we are using the send message mutation here which has an input and the input gets a recipient email or email that we want to pass in and the text that we want to write to that user okay is that correct yes okay and then this is again a message so i can reuse my message fragment here like i did before let me get that here now one thing i'm wondering too is that even though you're defining this mutation inside of the graphql schema you still have to have like a server-side component to process that right like there's still some server-side thing called send message mutation that's that's receiving this and and you know doing stuff with it so essentially that is graphql query and in my backend i just have the type system so the execution engine knows how to execute those queries so essentially that is the execution engine in graphql so if we look at this is the backend so i have the backend schema here and i can see here's the mutation so that is the keyword indicator here we have the name or the name send message that is just a name i can give it to identify it and then we have here the actual mutation and this actual mutation is in the back end here so i'm just executing i'm selecting it to be executed uh so in the back end there is a mutation type and that mutation type has a send message method on it and that is invoked okay i got it i got it i got so you're not defining the mutation you're just yeah so with graphql you're not it's not like sql where you craft joints and stuff like that and you're more i would say and it's also called in a spec like that so this is a field selection so you're selecting things that you want to use and you just can select more or less from the server and that essentially gives you the power to craft the interface in a way that you want to have it and these fragments are also essentially just a way to compose what data you want to use so essentially to select the data that you want to use from that specific type in the server so there's a message type in the server and this message type so this name the first is living in our client and this is essentially what we are selecting from in the server so it's a it's it's pretty easy when you get started with graphql and you quickly get into how that essentially works so it's just selecting it's just selecting as if you just write selects in the sql statement you're just selecting fields okay so we now wrote the the mutation that we want to have and we essentially send in the message that we want to produce and then we get returned the new message object that the server produced and that essentially is the same message shape that we use in get message so both will uh project onto our imessage interface in our client okay so now the last thing is real-time data and it's as easy as writing a notation because we let's just copy that so i don't have to rename something let's call it read messages uh because this is our our way to read the message stream and in subscription we don't write any other the right uh like any other query we just start with subscription and this is uh selecting the real time type in our server so we call it read messages the server already knows from the token who we are so we don't have to explain or pass in any arguments here so it just sends us the message that we receive so we say receive on message receive and we can see here that this on message receive event is a message so we essentially can just do that and be done with it let's make our api shape a bit more nice so we could maybe use an alias here message so we get a field message on our response okay with that let's generate that i actually never tried if aliases work with our new version but we will find out [Laughter] soon enough um okay so our message type look at that lots of types produced but this is actually the type one is our message type you can see it's actually using here a unique type which is a participant so each message has a participant and that's actually what we defined okay so let's head into our component and put that all together so first let's un comment our message components here and recompile and then written like a bash script that would like just go ahead and rename it yes yeah but to be honest i just uh just built this uh this demo of re-engineered this demo yesterday so it's pretty fresh so we have participants does not contain a definition for his online so let's have a look if we did something wrong with our participant interface so get users participant oh yes so i swapped the fields i actually this goes here and we actually need this here and then let's regenerate and the nice thing is with source generators we have all these compilations we have all this compilation niceness so if i do a mistake here you can already i get a squiggle here already from our graph color tools but if i compile that i actually get a proper compile error here that something is wrong so i get multiple compile errors but i should this is just from our razor components we don't have uh any any uh thing yeah but i also have here compile error from my uh get users and i can head into it and fix that so that is all provided by the ruslan diagnostics and makes it pretty powerful it works in visual studio even without all the tooling just recompile that is it correct ui it works in any ide so that's uh pretty pretty cool with uh now the source generators in place so now after you build this we should see those messages show inside of the chat window yes so we now have his participant here so we can see uh all the stuff should now yeah comes together so it works now um let's put that whole thing together and see that it all works so what we have here now is basically the people list we're putting the next to the message list in here before i actually do that let me just um you can see it wants to put this ugly long string in here so let's go to our imports and we want also the chat name space to be imported so we get a nicer component we have the message list in here and our message list actually has also some inputs that it wants so let's have a look at the message parameters and the message parameters here i have a click send when i send my message i have it is loading we already have that i need a recipient that is the person i want to write to and i need an immutable list for of messages okay let's put that in and then bind that to our component and we can just steal that here and at the beginning it's just an empty immutable list i would say empty muted list of imessage it's empty and we have this recipient object object with which is an eye user a recipient which uh also is kind of notable we didn't have another turned on so i did it for nothing um okay so with this we can bind everything to our message list here and so it's loading we actually can copy that from here and then we have we say messages and this binds to our ad messages then we have the recipient which binds to our ad recipient and then we have this event which is uh click send which will bind to one click set okay so this let's create that okay there's no shortcut for it so let's copy that one click send which gets a string in there a string which is our text or message text and now puts let's put it together with the client so what we need to do now is so when we click on the user we essentially need to fetch the messages so we can do that here chat client um get messages and execute that in this in this instance we just use a simple execute to fetch the data we don't watch the data we just fetch it it still will update the store so in this case we are using the email here wait we get a result here and this is the same result we would get in the subscribe method here so we just grab that um and then we put that into our messages so we say messages and this is a great range here and then we just put in the data of our request so data person by email messages and notes okay so we updated this we set the recipient to the user that we have passed in here and update our components so far so good so that's gone so we clicked on our user now our essentially our message area opens and we can write messages we have we can already look at our messages to send a message we need again a simple execute but this time from our mutation and we say this is a sent message mutation we do an execute here we essentially use our recipient that we have saved right here and then just pass in the text okay so essentially we just wrote the message now that let's just update our message list because to messages and we just grab from the data here our send message and then the message that we get returned it's again an imessage because we defined that fragment there we just update this date has changed so how do we put in the real-time data we put it up here we essentially do chat client and then we again subscribe but this time we subscribe to our message stream that we get from the server so we do a watch in this instance we don't care about cache first because we just want the live message stream so we go with the default network only execution strategy here so we subscribe to that say reside and then just grab the message let me just put that in so we take the message list that we have the messages messages and we grab the result grab the data wrap our message on there and say state has changed okay so if you look at the code we wrote it's um effectively not a lot so let me just make it nice again yeah it looks like you you're publishing and subscribing to a lot of events in general particularly in that first initialized setup yes i'm i'm subscribing to events there's one caveat here so you have to get rid of the so it's essentially these are sessions and you have to just both dispose them when you don't need the component anymore otherwise you keep the subscription running um but that is a pretty easy you can just implement an eye disposable here that's one way to do it i don't care about that now we also built a bit more integration into razer that you have something like they call in in angular the async pipelines where you essentially can just put the the observable into your components and all this is handled magically so if you know angular you know what i'm talking about um but this is still in the works we are still experimenting a lot with the life cycles in blazer but at the moment you could just dispose these components or these observables okay so we have our chat line here we can just refresh it we get an error and that's because we are using now subscriptions but we haven't put in a socket connection and this is pretty much also generated actually for you so we have this chat line we have the hdp client and what we essentially provide is a very easy way to handle socket connections and that is you go in here say at the socket client and that mirrors the setup of the http client you can also hook in here middlewares to handle connection boards to put poli in and stuff like that in this instance uh i'm cheating a bit with authentication since i'm just putting in the yuri or the websocket connection passing in the token as a ul parameter this is not the fine way and if you are not select channel i will always tell you to put the token actually on the message but it's a lot more setup code you would need for that so let's just stick with the easy castle this is one of those situations where this is good for the demo but like don't don't do this in in production exactly it's much better to put it on the on the message because then you can also swap out the token uh once it's on the ui it's uh not yes that's easily clear yeah um okay so in the message you can even have a refresh a refresh message for your token and stuff like that so but for the demo it's actually pretty easy to set up we can see it's running now we have our middle area here i can click on maybe so you see my design skills are not the best so i can click on any of these users here maybe you write a message hello send that message get here hello and actually you can try out if if my subscription works here let me just grab my notes on that let's go to uh channel nine so it's this url i can post that maybe even to the youtube chat and then you can more easily grab it so let me put that over here yeah if you want to you can give it to me and i'll drop it in the chat um i already did it but i can also give it to you as well if you want to put it on twitch i think i put it on youtube uh yeah you can already see that f two is not for me but hello this is me hello michael from new zealand so hello can zealand so you can see people are already sending into my debug session here and that is pretty easy to put that together and if so i haven't because this is really new the stuff we built around that so um we built uh over the next few days until the end of this month we built out um a more sophisticated demo that really shows off how to serialize your state so how can you put your save your state on the disk which is cool when you have blazer for winners and also to do other things like writing local resolvers why local resolvers because with local resolvers you can extend your schema right here in on your client application and then just say okay i need an extra field on my user or on my person entity from the server but i want to fill it with data from my local state maybe i have some extra data on my storage or i have some extra data that is coming over rest and we will aggregate essentially schema stitch on the client side for you and you only have to um work against our strawberry shake client so everything you can write graphical queries and actually fetch from your file system so uh we will pimp this this uh demo more and we'll update you if you follow us on our github page or on slack that's awesome mike and so so we're pretty much at about time but michael i want to say this has been a really great demo man um like we just spent an hour and a half talking about um how we could work with some of the stuff in blazer i know we had some folks in the chat that were really interested in talking about some of the server side aspects of hot chocolate so i think we're gonna have to have you come back on again and talk about it also you know you you have been on.net before so if you if folks that are watching if you head over to channel 9 and you go to our.net show um michael has about what three or four videos talking about server side of graphql and some of these types of things so definitely recommend that you have it over there and check them out until uh until we can get them to come back on again but um i think why don't we end off with letting folks know um you know like like what's the website for hot chocolate where can they go and learn about things and see things and reach out to you and that type of stuff yeah so um the best thing to go to our page is github so head over to github if you like us give us a star all the contributors really love uh to to see our star count growing so it's kind of our reward all the work is done in our free time so that is a nice appreciation um so this is essentially the base where you can find all the source code so all the source code uh tooth strawberry shake what strawberry shake looks like you can find how we built the source generator everything in here so it's there's nothing hidden there's nothing proprietary everything under a good license the standard open source license from microsoft and we have a slack channel the hot chocolate slack channel we linked to that on our github page and there is constantly you can see there are already messages waiting for us so there is a big community 1700 users talking about hot chocolate and strawberry shakes so join us we love to have you great and then everything that you've shown so today is in hot chocolate version 11 and above right so so these are things that people can go out now and try out and use and you know they're pretty yeah it's so so what i've shown you is uh essentially strawberry shake uh preview 58 so this is this guys here uh and essentially get started with the new uh story shake code generation c-sharp analyzer package but have a look at my public speaking repository so go on github and that's where you can fetch the demos so it's michael stein public speaking and there is a new channel 9 live and there is a demo one completed this is the final example that we have here and then you can essentially look at how i put that together uh with the current uh version 58 that is on the internet or nougat and then i'm just pulling up the link now i'm going to drop the link in the chat for folks to uh yeah i can post them to you here there you go so it should be in the chat now um for folks that are on youtube and twitch that are watching us um definitely feel free to go ahead and you know for micros repo check out the code send them a pull request if you want and um yeah let us know like how do you how do you like working with graphql in asp.net let us know if there's anything that you'd like to see um from a data perspective with any framework or even from an open api perspective in terms of discoverability um again let us know for sure um so i guess with that being said michael it's been it's been great having you on man every time you come on i feel like your library has continued to grow and there's always more stuff in here to check out so um you know yeah we're gonna have to try and get you on another time so thank you i really appreciate it okay all right everyone well hey thank you all for watching we'll be back next week for another episode of on.net life um next week we're gonna have ryan on he's gonna be talking to us about um dapper um so that should be really cool so if you're interested in building micro services and want to know how well dapper works with dotnet uh make sure you tune in here same time next week thursday so bye everyone take care [Music] [Music] you

Channel: dotNET

Views: 5,784

Rating: 4.9703703 out of 5

Keywords:

Id: LfPc0sitoR4

Length: 90min 16sec (5416 seconds)

Published: Thu Feb 18 2021