Angular 11 Web Client for GraphQL Service (Service written in .NET 6/C# 10)

hello everyone and welcome to dot net core central in my last couple of videos i have discussed about graphql mainly creating a dotnet 6 graphql service and then performing operations like query and mutation query for accessing the data and mutation for create or edit the data and then i also created a dot net six client to access the graphql service in today's video i am going to walk through how to use angular application to consume a dotnet 6 graphql service so for that i am going to create an angular application okay now that the project is created i'm just going to go into the project and i'm going to open the project in visual studio code so now we can see the standard project is created i'm going to open up a terminal once the terminal is opened this is the time i am going to install the package which we are going to use for connecting to graphql so the package that i'm going to use is apollo apollo is the client that i'm going to use for making graphql queries so for that am going to have this command which is ng add apollo angular ng ad apollo angular is going to install the necessary packages for apollo and the packages that will install is graphql which is the graphql client apollo angular which is the bridge between angular and apollo and the apollo client so instead of going through that i'm going to run this command because this is going to install all the necessary packages as well as the entries that we need for the graphql for the endpoint we are going to provide this particular endpoint which is our graphql server so we are going to provide this endpoint and it is going to take care of apart from installing the necessary packages it will also set everything up for us so we can see it has updated the app.module.ts you can see it added the graphql model and it added this graphql module where it added the url and then it creates these and it uses an in-memory cache and then here for the provider it added the necessary dependencies as you can see here it uses apollo angular http apollo client apple angular and then angular core so now what we can do is we can go ahead and run this application just for the initial run and then slowly we'll start changing the code to implement component which will show querying the data from graphql server and then another component which will help us create data using graphql so now we are going to go into localhost 4200 and we can see the standard angular application so first what i'm going to do is i'm going to go ahead and remove everything from component.html next what i'm going to do is i'm going to create a new component so for that i'll say ng generate component and i'm going to use a component called product which is going to show the list of product and it's for app so it's going to create the product component and here for the product component we want to show the product but before that what we want to do is we want to add the code for querying the graphql so for that what we're going to do is we're going to add in the constructor a reference to apollo and for that i'm going to add the apple or angular so this is going to give me the apollo and on init what i can do is i can do this.apollo and then dot watch query watch query is the method that we are going to use and then in the watch query we can have query and for the query we're going to have gql that's the the method and for the query we can just copy the query from the ui so from here we can just copy this query because this is the query which gives all the products so we can just query this and we can just paste it here so this is our query and then what we can do is dot value changes this is the method dot subscribe we're going to subscribe into it here i'm not using reactive extension but you can definitely use reactive extension all the way so i can get the result i keep it as any and then here i can say i can create a product area so here i can say products which is an area of any i'm going to set it as okay now i used any which is not a good practice you should create proper type for product but for interest of time i'm just keeping this as any but as i said this is not a best practice to use any since we can define the actual type of this product and then here i can say this dot product is equal to result is not equal to null dot data not nautical dot if you remember from the response it the result will contain data and data will contain products so we just did the exact same thing here so this is going to give us the product now what we can do is we can go into the product component and we can write a simple html for the product so i'm going to copy paste a code snippet here which is going to just check for the products and if products is available it's going to create a list and in the list it is just going to give the product name and quantity and the list will have a forage loop for each products now one other thing i'm going to do is i'm using some bootstrap style here i'm just going to add the bootstrap cdn link here just so that i don't have to install bootstrap but you can go ahead and install bootstrap for your example so once we have that we can again do ng serve and run the application now the application has started so go back to the ui and refresh it and it is empty so now we have to add the component so in the in the app.component.html we are going to add the code for showing the component so for that we'll have a div and the class is going to be container and inside the d we'll have another div we'll create a raw standard css style from bootstrap and then we're going to have to create a column and inside the column we're going to add the product component and the product component is nothing but app dash product so you can just copy that and here we can just say f dot product so once we do that the application will recompile and now we can see the product result is showing up as laptop 20 mouse 30 keyboard 10 monitor 40 and microphone 60 and this is the exact same result we see here is been reflected here the one thing i had to do to my dotnet six project is i had to add the codes so i added the course support using add codes defined a policy and i allowed any origin any adder in any method you can restrict the origin based on what exactly you want to allow but because this is just an example and everything is running in my local pc i just allowed any origin and then i just use application.use course so that's something i had to do for this to work okay now that we have shown it is extremely easy it is to query using graphql and if you open up the developer tool and just run the query again we can see the exact request response so this is the call we are making in the payload we can see the request it's going query which is taking the name and quantity and we are getting this response so now let's go ahead and add another component for creating product so for that we are going to add another component and this time we can name it as something like product dash create so we'll create a component called product dot create and once the component is created we are going to do similar thing as the the product component for the product create component also we will inject apollo because we will be dealing with the apollo client and we will add the we'll import the apollo angular and then what we can do is we can create a method called create product a method which will be used for creating a new product and then here what we can do is we can do this dot apollo dot there is a method called mutate which is for mutation and we are going to use that method and here for mutation we are going to give from here from the mutation the name is create product and also if you remember we were expecting a variable because we are going to use the same exact same query there also so what i can do is in fact fast i can declare the query here so again it's a constant i can define the jql here itself and here i can define the query so as you can see i have to add the i have to import the gql also so now i can add this mutation query right here now the create product is nothing but the mutation query so we're going to pass it here and the next thing is we're going to pass the variables so for variables we're going to give the same name which is fraud so you can say prod and for the actual prod we are going to can just define a constant here constant prod it can be any equal to and we would need to define it we need to get the id name and quantity and then here i can just say prod and then i can do subscribe and in the subscribe i'll have the data coming in and here i'm just going to do a location reload this is lazy way of refreshing the data as i said for interest on time i'm not going to implement react.js otherwise we could have talked to different components and refreshed each other but for the interest of time i'm just going to do location.reload and on error you can do console.log and we can just say error okay so now let's go and so here for the product what do we need so first thing we need is id so for that we need an id and then we have name for this also we need a name and finally we have quantity for which we need a quantity so what we can do is we can here we can define id string and i'm going to explain why i'm defining id as a string and not an integer not a number so now what i'll do is i'll do this dot id this dot name this dot quantity now what i'm going to do is i'm going to convert this to integer here using parsing since the object id needed is integer if we declare it as number the in conversion does not work with graphql so i am declaring as a string and then doing a parsing so that's the solution i have right now if i find a better solution i will definitely update this video description to tell what it is but for now this is the solution i figured out so now this component is ready now we'll go back and we'll update the html and for html here also i have a saved html so i'm just creating a form and i'm just binding the ng model with id name and quantity and on click i am calling this create product method which we defined here so now let's run this application and we're going to use the same thing which is the ng server now the application is started so let's get back to this ui let's refresh it and i have to add the create product component to the component.html which i forgot so let's do div class column and then here we can do this and let's save this the next thing i also have to do is i have to import the form modules in the app.module.ts so i'm just going to add it because form modules is needed you for using ng model for two-way binding hence i am adding it now let's do an ng server again now it is running so let's go back to the ui and we can see it here so i wanted them to be side by side i'm using the wrong style i had to use draw and call not column now if i go i can see them side by side okay and as you can see we get got the response so now let's try to add another component and let's make it a 7 and for the name here we can say speaker because we don't have the speaker here and the quantity can be 70. let's try to create product and as soon as we created the product we can see the speaker is showing up here and the page reloaded now because the page is reloaded we could not see the http request because it was too fast so for the timing let me do one thing let me go back to the create product component and let's not do the page reload so that we can see exactly what command goes to the server i just wanted to show you how it looks like so let's do add and this time let's add cable to the collection 80 is to create product and this time we can see that we're making a create post call in the payload we can see operation is add and the entire mutation query is going with product input and the variable we can see the product variable is going and now if i just refresh it i will see the cable is showing up here as one of the item and we can see here cable issuing up so this goes to show you how you can use angular with apollo to make an application in angular which can consume graphql service written in dot net 6 or any other language for that matter for both querying as well as performing mutation so that is all i wanted to cover for today's video 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: 227

Keywords: angular graphql, angular graphql .net 6, angular graphql .net 6 c#, angular graphql .net core, graphql client angular, grapgql angular, graphql angular .net, graphql angular c#, graphql angular apollo, apollo graphql angular

Id: RSH3UM1xpHg

Length: 17min 35sec (1055 seconds)

Published: Sun Dec 12 2021