GraphQL - Mutation and .NET Client (An introduction for .NET Developers [Using .NET 6 and C# 10])

hello everyone and welcome to dot net code central in my last video i started discussing about graphql and mainly i discussed about how to query using graphql in today's video i am going to talk about how to do data modification meaning updating of data using graphql and then i'm going to walk through how we can use a graphql client to do query as well as post functionality in the graphql server the data manipulation functionality which can be considered in the rest world as post put or delete when we do that in graphql it is called mutation so let's start with that but before i do that i would suggest you go through my previous video because most of the thing that i am doing here is starting from where i left in my previous video but just to give a high level rundown in my previous video i created a type called product and then a graphql type for that and then a query object which does the actual query and then finally a schema where we added the schema for the query and i had a product provider which i moved it to a separate class for simplicity and the product provider was just returning some in-memory products and then finally in program after adding all the classes to dependency injection container i used the add graphql extension method to add the graphql to dependency injection and then finally i use the use graphql with the schema to add the graphql middleware and use graphql l tear to add the middleware for ltr which is a web-based user interface for executing graphql so i'm going to quickly run this code and just query uh existing products to show you and then we'll go and implement the mutation for graphql so once the project is loaded we can go to ui lter to show up the lter screen and here we have the documentation tab where we can look into the individual documentation this is also something i covered in my last video and then we can execute a query if we want to select a particular product we can execute this query if we want to select all the product we can execute a query like this if we want to get rid of some properties we can just get rid of and the response will come back with exactly what we need and that is the main advantage of graphql which i discussed in my previous video now let's get back and start adding the mutation implementation so before we get into mutation for supporting mutation the product cannot be like this so what i'm going to do is i'm going to create a class and i'm going to call it as data access and all i'm going to do is i'm just going to create an in-memory data store and for the data access class i'm going to have a private read-only list and here what i'm going to do is i'm just going to copy paste this and paste it here so these are the product definition this is the product definition and then i'm going to create a method to return the product so public of product and i'm going to name it as get and it is going to return the products and then i'll also create a method to create product so i'm going to name it as public void create and it is going to take product as a parameter and here i'm just going to do products.add product product is the in memory list so that's all and then i'm just going to implement an interface or extract an interface out of this class and put it in the same class just for simplicity okay and i can get rid of this unnecessary pieces okay so this is ready and then what i can do is for the product provider i can create a constructor where i'm going to take i data access and here i can just do data access dot get dot to error so this will be my product provider and then what i'm going to do is i'm just going to add the data access into the dependency injection i'm going to quickly run this and make sure it's working and then we are going to go and create a method for creating product so let me run this and this is working as expected now we'll go ahead and implement just like i product provider we're going to create i product creator so let's go ahead create a new class name it as creator and let me get rid of this and for the product creator what we are going to do is we are going to just like the product provider will have a constructor and in the constructor we'll take i data access and then we'll create a public product create which is going to take product as a parameter and here we're going to return product and then before that what we'll do is we'll do data access dot create product so all we are going to do it's simple it's just going to append the data to the in-memory data store that's all it is doing and then now it's time to create product mutation so in the product class we have the product type and product query for mutation let's create a new class and i'm going to name it as product mutation and i'm going to have the product mutation implementation later on but before that just like when we return a type in graphql we have to create a graphql type similarly we have to create a type for input parameters so we cannot just accept the product itself but we'll expect an input parameter which will derive from input object graph type so for that i'm going to create a public class and i'm going to say product input and it is going to derive from input object graph type and just like if you remember the product type in the constructor we were using field we are going to do the similar thing here so we'll create a constructor in the constructor we're going to create a field and the type of the field is going to be in graph type if you remember graph type has their own integer and string another value the first one will be id and then second one will be string graph type which will be the name third one again will be in graph type which will be quantity these are the if you remember these are the three parameter we have id name and quantity hence id name and quantity here and then we are going to implement the product mutation and for the product mutation the product mutation is going to derive from object graph type just like the product query the mutation also derives from object graph type and its method also would look exactly same because underlying these are just incoming http calls so the implementation for both mutation as well as query is going to implement the base class object graph type and here just like the other one we are going to create a constructor and in the constructor i am going to inject the i product creator i have to expose the interface which i have not so let me add the interface okay now i can see the product creator and let's create a variable and then for create product what i'm going to do is i'm going to add a field and the product is going to return the product so for graphql it's going to be the product type as the return and then for the name i'm going to name it as create product that's the name and the next thing we want to pass the argument because product creation has to get the entire product back so for the arguments we are going to say new of query arguments just like before and then here ends and then here we're going to say new of query argument and for this one our argument is nothing but product input so we are going to say product input as the argument and then we'll just pass a name and the name is going to be nothing but product so that's our argument and then next just like before we are going to have resolve and for the resolve what we are going to do is we are going to say this goes to product creator dot create and for the create we need to pass the product parameter and for that just like the query we're going to do x dot get argument and for the argument type it's going to be product as you know this product input will be converted into product because they have the exact same properties so we'll create get argument of product and the name is going to be the name that we passed here which is product then close this and close this that is essentially the implementation for the product mutation now what we are going to do is we are going to go back to the product and here in the schema we need to expose the mutation so for that what we're going to do is we're going to say mutation equal to the same thing but instead of product query it's going to be product product mutation and now i'm going to go into the program and i'm going to add the rest of the dependencies so the first thing we are going to add is after data access we have to add the product creator the next thing we have to do is we have to add the product input okay let's add the product mutation as we need that as well and the last one is going to be product input so we added the mutation we added the input now we are all set so let's run this application now and now we should be able to add new product through the graphql ui as well as postman but i'm just going to show the ui because then we'll go ahead and we'll try to execute the client implementation so now if i refresh the docs i go back to home i can see apart from product we have the product mutation product mutation has this create product which takes product as an input which is this three field so you can see the documentation is also updated now this query is going to work as expected now for mutation let me create another query called mutation and the mutation name i'm going to give as add and here i will take the product parameter which is going to be product input as the type and as you can see the mutation is also very similar to how query works and then here we are going to say the name of the mutation is create product so we're going to say create product and its parameter is product which is going to be dollar prod and then in the return we can have just the id for the time being and then what i'm going to do is i'm going to create here the product variable and for product we're going to have id is equal to 5 and then name and for the name let's name it as headphone as the product and for the quantity let's say 50 and now i'll go and run this mutation and i can see the product is created and we got five as the id back now if i query all the product i can see number five headphone is also added to the product list so this is how mutation works as you can see it is very similar to how query works and similar implementation will be if we want to add delete and update it's not going to be very different so i'm not going to spend any time on delete and update at least for this video because i'm going to focus on how to now use a dotnet client to make queries into a graphql.net service or any other graphql service for that matter so for that i created this project called graphql client demo right now it doesn't have anything let me get rid of these and then in the new get package i already added couple of new get package first one is the graphql.client that's the one we need and the second one we need is graphql.client.serializer.newtonsoft once we have these two now we are ready to create a client so for the client first thing we need is we need the same product object because we are going to deserialize into the same product object so let's go and create a class here and let's name it as model so that we can keep all the models here let me get rid of any of these because now these are needed and here we can have product and then the other thing is we'll need couple other models but i'll come to that later next thing what we are going to do here is first thing we are going to do is we are going to create var client equal to new http client so we are going to create the graphql http client and for that we have to add the namespace graphql.http and then this takes the url so we are going to pass the url the url is going to be this and then slash graphql so i'm going to get rid of the ui and ltl instead of that it will be graphql if you remember my last video this is the url we used to connect from postman is the same url so first parameter is the graphql the next parameter is the serializer so for serializer we are going to use the newtonsoft json serializer and i'm going to add the namespace so this is the client is now created after the client is created we have to create a request object now first we are going to show how query works then we are going to go into mutation so for query i am going to create var query is equal to new and we can use graphql request i have to add the namespace graphql and then for the graphql request we have a parameter called query and we are going to set it up and for the query we can pass the exact same query that we pass in the ui so i can just copy this query and pass it here and i can also add the quantity to it so this is my query and then i can do var response is equal to client dot send query sync now here i'm going to add ebate and send query is saying here i need the response back and then here i'll pass the query now for the response we have to create a model because if you remember the response comes as products and then an array so we have to create a response object for that so for that what we are going to do is we are going to create a products response so we can create public record products response which will have an array of products that's all and here now i can say product let me just copy paste this i'll have to add the namespace for this as well okay and here i want to print out all the products from the response for that i can do for each product is equal to response dot data dot products which is going to give all the products and then i can do console dot writeline and i can say product dot name comma product dot quantity let's just print this too and now if i run this application something did not work okay i am missing the top level brackets for the query now let's run this now you can see that we got all the five products back laptop mouse keyboard monitor and headphone now let's see how we can do the same thing with a single product so i can again define a query here and i'm going to keep this code as is add new code and i can say var query is equal to and here i want to get a single product so for that i'm going to copy this entire query and this is what i'm going to use so here as you can see i'm using the same query and i'm saying first product where id is an integer and then i'm just using the id and returning this now here what we have to do after we define the query we have to define the operation name because we have a name for the operation and the name is nothing but this name so we can say operation name equal to the first product and then finally we have to pass the variable because this id variable needs to be passed so for that we can define variables and this is just a dynamic parameter so i can say new and here for us it's just the id so i can say id is equal to 2 which is the second item and then after that i can create another bar single response is equal to client.date and i can say send query async and this time i am expecting a product and if you look into the response of this query i have to id okay so if you look into the response of this query it comes with the product the data has a product object and the product itself so for that what i'm going to do is i'm going to go back to model and i'm going to create something here called product response so public record and i'm going to have here something called product response which is just taking the product so here when i do a send query it is going to be nothing but product response i'm going to pass the same query and then now this is a single response so what i can do is i can do console dot write line and i can say single response dot data dot product let's try to print it out and let's run this so first we see the five one and then we see the entire product object printed out product id to name mouse quantity is zero so quantity is not showing up because we are not getting the quantity as a part of this response but if i add quantity here we'll see quantity is equal to 20. so if i just add the quantity here and run this we're going to see quantity is going to be equal to 30 mouse quantity was 30 so quality is 30 as expected so you can see how easy it is to use the same query in a dotnet client and then the last thing we are going to try is how to do mutation and it is going to be very similar so first we are going to create a query it's going to be like this and we are going to copy paste this mutation logic from here and paste it here we just do some indentation okay and then for the operation this time the operation name is said and for the product here it's actually an object of product input so what we are going to do is we are going to say prod because that's the name we are passing here prod is equal to new will create another another anonymous type for the id we're going to say 5 and then id is 5 and then name is equal to we can say speaker and then quantity we can say as 60 so that's the variables and then finally we can just say var mutation response is equal to client dot and we can do the same thing we can use the send mutation async or we can call send query async send mutation async internally just call send query basic i just went into their source code in github and figured out it's pretty much the same so i'm just going to use send query async and now for the product response before we are getting a product back we need if you look into the product response product response actually what's getting if you look into the documentation the product response is going to get a create product back so we have to create a different object for that so i'm going to go into models and here i'm going to create a create product response you just copy paste this and call it as create product response and here the name of the parameter has to be create product because that's the name of the response and this is critical that the name has to match the name of the actual response so create product response and then here we can say create product response and then finally i can do the same thing just do a console.write of multiple response and then we can go back and check data.create a product it's the response and then we can go back and check in the ui we can just run this query and we should see the speaker should be added to the response here so let me run and we can see the id is 5 name and quantity is 0 and empty because we are not selecting any name and quantity so that is expected now if we go back here and if we run the select we can see id is 5 and speaker is coming if we add the quantity we can see the quantity is also reflected here as 60. so as you can see it is just like building roughquelin.net querying graphql from our dotnet client is also extremely simple and it's very easy to do it once you get a hang of it in my next video i'll try to cover using a graphql client in a html and javascript based application like angular and how we can use a.net graphql service with an angular application and the angular application calling out the graphql service so that's all i wanted to cover for today's video and if you want me to cover something else in graphql please leave a comment below if you like this video please give me a thumbs up and if you are new to my channel if you think you are getting value out of my channel please subscribe to my channel and thanks so much for watching this video

Channel: DotNet Core Central

Views: 290

Keywords: graphql, graphql mutation, graphql .net client, graphql c# client, graphql mutation .net, graphql mutation c#, graphql mutation .net core, graphql mutation .net 6, graphql .net core client, graphql .net 6 client

Id: xFiWo8eiSSs

Length: 26min 45sec (1605 seconds)

Published: Sun Dec 05 2021