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

hello everyone and welcome to dot net code central in today's video i am going to start discussing about graphql and today's video will be the introduction to graphql and then in the subsequent videos i am going to talk about some of the advanced topics around graphql first let's understand what is graphql graphql is an open source query language for api graphql is a runtime for serving those queries with existing data and then graphql gives and this is probably one of the most important part is that graphql gives clients option to ask for what exactly that need and nothing more or nothing less and as a consequence of that graphql allows apis to change over time without impacting the client and need for api versioning now all of these four points will be clear once we get into the example and walk through how to build graphql with dotnet 6 and c sharp 10. i am using dotnet 6 and c sharp 10 but you can use dotnet 5 or net code 3.1 with the same set of nuget packages that i will be using today so let us open a project that i created so this is a project that i created for graphql demo it has a record for product which has id name and quantity and then it has a product provider interface which has a method called get products and then an implementation for product provider which returns an array of product and right now i'm just sending out hard-coded product array but as you can understand here this product information might come from some sort of data store but for the time being i'm just sending out in-memory data from this particular method and then in the program class i added the product provider into the dependency injection container and then i created an api called slash api slash product which is just returning the products and if i run this application we can see the swagger information and from there we will be able to execute the rest api and see the output so now if i execute the rest api here what you will see is that the product information is showing up it has id name quantity and for all the four products but here for example if an application just needs the name of all the products it is still going to get everything over the wear it does not impact so much as for applications which has luxury of having bandwidth but for applications which doesn't want to use that much of bandwidth that's a lot of waste of data across the where and now the option with rest is to create another endpoint which will just return the name as an array instead but as you can see if we have to support multiple scenarios then we are unnecessary creating multiple endpoints and it is also not flexible because what if someone wants a combination of id and name only in the response then as you can see you are going to end up creating multiple permutation and combination of api and the maintenance cost is extremely high and this is the main use case of graphql basically allowing you to query the data on top of the rest api so that the user can decide whether they need id or name or quantity or id and name or id and quantity and mix and match whichever way they want and this is extremely helpful when your object contains multiple property it also provides a way to combine multiple api calls that is something we are going to cover in the subsequent videos now let's get back to the solution again let me stop this now for the purpose of graphql now there are few new get packages available out there but i am going to use the graphql nuget package and the first thing i'm going to install is the graphql and as you can see the graphql works with dotnet standard version 2.1 and 2.0 which means it's going to work with dotnetcore 3.1.net5.net6 even with legacy.net framework so i'm going to first install this and after this is installed next thing i'm going to install is graphql.server.transport.asp.net code dot system text json that is the one which will be used when we configure the graphql and i'm going to talk about it when we go there so that's the next new get package and as you can see this nuget package actually supports dotnet 5 and net core app 3.1 so of course it's going to support dotnet six and the last thing that i'm going to use is another nuget package and the one that i'm going to install is graphql.server.ui.l this is a ui which will help us play around with the graphql query though we can use postman also to execute graphql but this is very useful in terms of playing around with different query and also to look into the documentation for graphql so now that all these are installed let's go back to our product so the way graphql works is for graphql for model for example here product is a model that we are using for graphql we have to create a mapping type because graphql does not understand the model out of box so we have to create some sort of mapping and the way we do it is we create a class which derives from object graph type from the graphql and then we define the fields inside of this so the way we are going to do it is first let's create a public class and we can name it as product type and it is going to derive from object graph type and i'm going to add the namespace the namespace is graphql.type and let me make this namespace as a global namespace in program.cs so that i don't have to i don't have to repeat it in other files so this is the product type and in the product type in the constructor this is where we are going to configure the fields so for that there is a method which is provided by the base object graph type it's called field and for the field it takes a lambda function so i'm going to provide the fast field we want to expose is id and then similarly we are going to expose the name and quantity name and quantity this will create the type which is necessary for graphql the next thing what we are going to do is now we are going to create a query and the query is the one which is responsible for providing the query or the get method from graphql and for graphql the post put and edit is supported by something called mutation which we will discuss in the subsequent video but the get method is essentially supported by something called query so for query we need to create a class called query class and the query class is going to derive from the object graph type and for simplicity i'm just keeping all the class into the same file but you don't have to do that you can create different files for different classes for me just to look into everything in one place i'm just doing that so you can just say product query that's the name and then here what we can do is again we can create a constructor and the product query is the one which is responsible for actually returning the data so we would need to inject the i product provider so i'm going to create my product provider product provider and here we are going to again use the field and we are going to provide a name and a resolver to give the name to the data and how to resolve or how to get the data so here we are going to say first we are going to say field and here for graphql the return types especially in terms of things like list are not going to be standard dotnet list so for the return type we are going to use something called list graph type and since we are returning an array of product type not necessarily product as i mentioned we cannot return the out of box product but we will be returning product type so the products will internally get converted into product type so here we are going to say okay we are returning product type and then we are going to give the name and the name is equal to products and then we are not going to have description or any other parameter but we are going to have the result and for resolve we are going to use the lambda and here we are going to say product provider dot get products so that's our resolver and here though the get product is returning an error of product but it will be internally converted into the product type so we do that so now this particular query now is going to allow us to query products but before we finish the third and another important thing we have to do is we have to define the schema so for that and schema is the third thing that we have to do for graphql the first one was the type where we defined the type then the query and the third thing is the schema and schema is what will be used for documentation and documentation is very important just like swagger doc you need to have documentation for graphql so that the clients can understand what to query and what are the different attributes which are available to query from so for this one i'm going to create public class product schema and product schema is going to derive from the schema base class and then here we are going to create the constructor and inside of constructor we are going to inject the i service provider and the iservice provider is something we are going to also provide it to the base class so that the base class can use it and then we are going to set the query property and for the query property we are just going to get service provider dot get request service and for the required service we are looking at product query here so we're going to say product query and this is how we configure the query parameter so we said for the schema we're saying that the query is going to support the product query and product query is currently supporting products so this is what is going to show up in the schema and then once we define the type the query and the schema the next thing for us is to add all the things necessary for dependency injection so let's go to the program and in the dependency injection we already added the product provider next thing we are going to do is we are going to add single turn and here we are going to say i schema and for the schema we are going to provide product schema product schema is the thing that we have to expose so now we have exposed the product schema next thing what we are going to do is we are going to add the graphql service so we can say builder dot services dot at graphql and here it takes a delegate so i can say option it's going to option i don't want to map anything so we can say option dot enable metrics i'm going to set it to false i'm going to show you what enable matrix is but let me first set it to false because it's a little bit of noise but then i'll set it to true to show what it is and then finally we're going to say add system text json and this is part of the graphql.servernamespace so i'm just going to add the namespace here and once i do that i have configured the graphql in the dependency injection container and finally what i'm going to do is i'm going to for the app i am going to use the graphql but i also want to use the nuget package that i added for the ui purpose which is the altir so for that what i'm going to do is i'm going to say app dot use graphql l tier and then i am going to say f dot use graphql and here i am going to pass the i schema so this is pretty much standard that we always have to do and couple of things i forgot is we also have to add the product type and the product product query these two also needs to be added now let's run the application if we go here to ui slash altair we can see the user interface for the graphql playground and in this ui if we expand the dock we can see products once we click on products we can look into the fields of product as you can see it is product type and it has id name and quantity and this is what we exposed to the product type and the schema documentation and now if we have to search for all the products with all the fields what we are going to do is we are going to say query and you can see and here we can say products and for products we can say id quantity and you can see it has some sort of intelligence and name and if we run the query now we are going to get all the products with ide quantity and name and this is pretty much same as the standard rest api but here this is where the magic is going to happen if we want to just get rid of these two property and execute now we can get just the name similarly if we want to get name and id we can get name and id and the way we want similarly if we want to get the product twice we can say we can give an alias to them so we can say product products1 colon and that's product and then we can say products to and we can say product and here we can just get the quantity so we'll have one schema for getting name and id and the other one for the quantity and we can run this query and as you can see the fast array is returning the name and id and second one is just the quantity so you can see how powerful this can be in terms of querying now we can do the exact same thing in postman so let me show how it works in postman in postman what we can do is we can copy paste the url from here and the query so we can come here this is going to be post and here instead of these it's going to be graphql and in the body we have this option of sending graphql data so i'm going to select that and here i can do the same thing i can have query and inside query i can have products and inside products i can have id and name and i can execute this and i'm going to get the idn name as expected and if i just need the name just get rid of this send a query and as you can see this is using standard postman call we're able to make a graphql call now so far we just played around with an array now let us expose get product by id for that what we are going to do is we are going to go into the product query here and here we are going to add a field field and we are going to say it's a product type and for the name we can pass the name as product and this is what is going to show up in the schema and after the name what we have to do is we also have to provide a parameter so for parameter we have to provide arguments so we can say arguments and in the arguments we can create a new query arguments and inside of query argument it sticks and param of query argument array so i'll just create a single query argument and for the query argument the type now type is very important the type that we are going to take is an integer but when it comes to graphql it's going to be the graphql type so it's the end graphql type so it's going to be int in graph type and then for the name we are going to give this as id because that is what we are going to expect and then finally we are going to use the resolve argument where we are going to do uh get products dot fast or default and we can say product dot id is equal to and here we want to get the argument so we can get the argument from this parameter which is the i resolve field context or the context so we can say x dot get get argument type is in and the name of argument is going to be id and the get arguments is part of the graphql namespace so i'm going to add it so that's all we have to do now if i go ahead and run this we are going to now see two schemas essentially one for product and one for products and we can query both now if i refresh you can see now inside of product i see products and product products is something we saw earlier now for product we see that it expects an input parameter of hint so it has an argument of int id and then it returns id name so here what i can do is to the same query i can add product and if i do product i'll have to pass the id and the id let's say i want idf2 and here i can take the name and quantity and now if i execute i can see the product is showing up here let me get rid of the other two products and just execute the product and we can see the product is showing up here and similarly you can get multiple product as a part of the same query using aliases so we can say and here we can say product id for and for that you can just get the name let's say and if you execute you see that the product 2 is this product 4 is monitor so as you can see it's really easy to get us going with graphql now we can take the same query and execute in postman and we're going to see the exact same response there as well and as you can see we see the exact same response here in the postman as well so this is the very basic introduction to graphql now another thing we can do is for ide we can use some sort of variable mechanism and once we use variable the variable can be passed across so now if you want to show the variable we can do it here so we can let's say i just want to deal with one product and for the query we can say we can declare the variable here as id and we can say id is an integer and it's a non-optional one and here we can say dollar id and then for the graphql variables here we can pass id as one so we can execute and it's going to be left off and here now we can change it to three execute its keyboard for monitor so as you can see without changing the query every time we can just change the variable and reuse the query as is so this is another nifty feature of graphql that you can we can use so in this video we just walk through how to use graphql to do queries and we dealt with the scenario of a product service and product query and how to use it in multiple scenario and this is just an introduction to graphql using the graphql nuget packages and as i mentioned the graphql mainly works through between these extension method to services and this middleware between these two it takes care of all the internal mechanism and the use graphql at layer takes care of showing the ui to us now as i mentioned i can set it right now it is false i can set it to true and let's show you what happens if we set it to true when we set it to if we run this we get this extra set of information this is mainly the tracing information which we get so we don't want to set it to true in a production environment but if we want to debug and see some of these information then yes it makes sense to set it to true but this is how you can use it and regarding the variable the ui also there's an option of variable so we can expand this and then we can do the same thing here we can say id it's an integer and we can use dollar id here let me get rid of this and then here we can pass the id for the value we can say 2 execute we're just going to get the data for 2 here similarly if we pass 4 we are going to get the data for 4 so we can use variable either in the at layer ui or in postman so this is all i wanted to cover for today's video this is a very basic introduction about graphql in the subsequent videos we are going to talk about mutation which is how you can do post port and some of the other features of craft cuba if you like this video please give me a thumbs up if you are new to my channel and 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: 748

Keywords: graphql, graphql query, graphql .net, graphql .net core, graphql .net 6, graphql c#, graphql query .net, graphql query .net core, graphql query .net 6, graphql query c#, graphql c# 10, graphql query c# 10

Id: gEApqKuWvSg

Length: 24min 52sec (1492 seconds)

Published: Sun Nov 28 2021