Angular Application To Consume GraphQL Endpoint Using Apollo Angular Library

hi everyone today video is on using apollo angular library for consuming the graphql endpoint into angular application okay so if you already know about graphql uh rest api it is quite difficult to consume the graphql endpoints using the javascript any kind of library like to call the api calls right so here what we will do means we will use a one popular uh library like apollo angular by using that we can use easily we format some graphql queries and invoke them into the graphical endpoint okay so before going any further i want to mention that the entire session has been already created as a blog okay this is the blog like angular application to consume graphql endpoint using apollo angular library okay everything i am going to explain in this video has been already added into this blog so if you want to go through blog the link will be available inside of the description under the video so you can check over there okay now let's jump into our sample i have already created a angular application with latest version that is 11 so in this sample i am going to do some basic operations like query and the mutation okay so those are the main things needed by any developer when they want to consume the rascal endpoint okay so for that we have to install the plugin of angular apollo okay for that you can touch like angular apollo okay and then click over here okay this is the documentation where you can find in-depth uh usage of the graphql query if you want you can go through the official blog official docs okay so let's go to get started and here there is an ng comment where it will uh in internally downloads all the required packages and also create a file like app.graphql module and in that file we will have all the configuration according to the graph scale so on our part we need to just run this nz add apollo angular command okay so let's copy that command paste it over here so here it is expecting some graphical url endpoint i am going to give in upcoming steps so for now i am just resuming my installation okay it seems it's installed successfully let's take the package.json file so this command internally install three main plugins like apollo angular okay and apollo client and then graphql okay these are the uh plugins dependencies that are indirectly installed into our app by running the nz apollo iphone angular connect okay and it's going to create one file like graphqlmodule.ts file so here it will by default implement all minimum logic to getting started with the graphql okay so the only thing we need to do is we need to assign here our graphql endpoint okay so that is the thing we have to do here okay so for this development i have already created a one graph scale endpoint using dotnet so i am going to use that apa to implement this sample okay there are some public api also you can use them the reason i am not using those public free apis because they won't support update so to show mutation also in this video i have created my own rascal endpoint if you so to follow my video you can use any free in ap endpoint or your own graphql endpoint please use it to follow the steps what i am doing in this video okay so this is my dot net application graphql application it is already up and running so the url will be like this okay and i have also mentioned that as a frontend developer we we may not no need to know much about the graph scale but we should know minimum uh about them like key features like query here you can see query keyword right let me zoom in this means in graphql terminology query command is for fetching the data similarly there will be another command is like mutation okay mutation is nothing but to save the data into the api okay so query is for fetching and mutation is for uh updating data into the server so and if you observe here this is my gadgets you are seeing right this name is nothing but a one of one method that is in the server so that method returns the response for us so here i have created a method at the server that is my gadget but you don't need to remember but for the sake of understanding i am explaining this okay so my gadget is uh this method in server what will do means it will it will return the collection of uh [Music] data collection of records okay since the beauty of graphql is inside we can specify only required number of properties only so if you give n number of properties only that many number of properties will be written by the server in the response so no extra properties are necessary if you observe here here we are requesting five properties you can see those five properties in the response if you want only two you can only request them only two properties so it is running see we are getting only requested properties that is the beauty of graphql okay so that is the basic info on graphql queries i think you got some idea on it okay same fashion mutation also mutation represents uh keyword represents itself updating the data okay so here co means my method in the server okay so that's about the graph scale every graph scale will have this nice rich qa a tool okay so this was actually built in hot chocolate dot net library so it will provide this tool name is like banana cake pop okay in some different libraries they will provide different ui tool so but it is it can be used by every any developer means it will be helpful for ui developers as well and it will be helpful for server side developers as well so this is the amazing tool so to work on graphql we should have the tool like this okay this url is server here and only this tool will be inside of the server code only generated by the server okay that's all about the basic idea we need to have on the graph scale so now we have to copy this url and come to our application and paste it over here that's it the graphql configurations are done from our side okay so now what i will do means here i have shown you right getting collection of data so in this sample i am going to i call this query graphql query and on receiving the data i am going to bind it to the table that is my first task on this video okay so for that i will i'm going to my application and i am going to use my app component only existing okay so here first thing is i need to create the query so for that what i will do means i will simply create a constant and i will name like get use so this naming convention is your own convention it is just an option okay and open this tactics okay because i am going to paste it here multiple line of code that is nothing but our query graphql query but here we need to have one more thing like from apollo angular one instant is like gq so we need to append this gql to the backticks okay and now what i will do means i will copy this entire query okay and i am going to paste it inside of this tactic so i have finished my a query for fetching the data graphql query for fetching the data okay now what i will do means in the component constructor okay i need to get one more instance like apollo okay i will inject here private apollo okay so i have injected private apollo and i want to load data on page load so i am going to implement on init okay let's implement that method let me get rid of this so here what i will do means i am going to access the apollo instance this dot apology here we will have one method like query watch okay call this method give any and here we need to provide it will provide query watch will takes input and object there we have to provide then we will have a query property to that query of property we need to pass our constant okay what is our constant get my gadgets okay this query objects returns one property like value changes so this this is an observable property so i have to subscribe to it to grab the data okay so this subscriber data okay so if you observe this data is nothing but the response from the server okay and this loading property will be a boolean value that notify us whether it is successfully completed or not okay so for now timing i am going to just also log the loading if you are using any loading spinner then you can use this value to assign the pro value to the property of the spinner okay to hide and show the spinner based on the data loading okay and now i want to store this data into a variable so let me create a variable like all gadgets okay and let for me any inferno so what i will do i let me create any uh model for this response data okay so for that what i will do for that here inside of the app let's create a folder like models okay instead of the model let me create a entity like gadget dot ts okay put surface object okay let's make it small casing and i want these properties to be defined here so let's grab these properties so this is my payload model type okay so let's define this type here okay i think automatically it will import as it is reported okay now what i will do i am going to assign this dot all gadgets equal to data dot this property i will ascend directly okay so we need to fetch our data what we are doing we are calling watch query to that watch query we are passing our graphql query right okay and it will we are subscribing to the value changes of this uh watch query method and once receiving data we are attending to the our operant local variable so i'm going to use a bootstrap table so let's go to bootstrap okay docs and just copy this css line of code and go to the index page now just paste it over here we you want to integrate internally that approach also you can do for integrating bootstrap i'm using it directly okay and you're getting and i need to update the html component html okay so let me get rid of all this okay and what i want and i need table okay and i want this dark theme so i'm copying this let's get the table rows and everything okay and let's give table headings like id i am having product name okay and next brand and the next what i'm having and check here product name brand cost and type okay so brand cost okay table header cost nesting brand cost under type and here i need to loop my all gadgets property right so let's get get off copy the property name from here okay so i am iterating the all the data on the tr so i can get rid of this existing one okay and let's make it let's remove it and file it is very required and next we need to find them okay yeah dot id okay i think that's it we are done with our initial process for fetching and binding the data so let's run the application so i have forgot to mention one more thing we are using ng for right so we need to import form module into our app component app module or else you will get an issue put the red angular slash forms or module and import that form module okay save it application has been good without any issues it is up and running let's access it in the browser and check the output okay see my data is binded how nicely so let's check the network call so i am reloading see my graphql endpoint has been invoked and you can see here data we are getting okay and one more thing i have to show is see this is a query string that we have prepared right this query property and the value we have passed okay so that's so the first step of consuming an api of a graphql with the query document we have to do like this okay so here if you observe it is a some like a plain comment and it is going to get all the data right but in general or in real time rest api if you compare with rest api what we will have will always have filters like query parameters right where some dynamic data is passed as a query parameter that was usually input by the user like something like some form or some when you click or edit button some query value will be then send out to the server as a query parameter so that kind of filtering how we can achieve in this graph scale so here query param passing query parameter also fetching a data pitching data means we need to do why we need to write query command only but how to input the dynamic value that user entered into this query command okay so for that graphql provides us a one small technique is like to pass as variables okay so first let me show it from the graphql point of view so if you observe here so let me zoom in okay if you observe here there are few changes you can observe okay this query represents query keyword represent it is a query and brand filter this is nothing but a method name in the server and here you can observe one thing is like dollar brand name okay this is the variable and where this variable is reference reference slice is here okay so one thing here we need to remember is this variable name should be root in the variable root property in the variable object okay in query we should append dollar to it these two names should be same if not we can face error okay so these names is our wish only what we we can define our own name but these two should be same only differences in query we have to use dollar okay and next thing string this is s capital s t r i n g string this is not a javascript type this is graph scale type how we know this graphql type this input has to be given for us by the server side developer okay this is capital s t r i n g is nothing but the graph sql type so this means it is a string type see here i am passing some string like samsung next this variable name is assigned to brand see this name should be input property name of the brand filter method in the server so this name should be match with the name in the server so this is also has to be given as as our frontend developer by the so this brand variable name is uh method prop method input parameter of this brand filter method at the server set so that's so here what it will do it will fetches the brands that we are uh requesting for so if i click on samsung we first check here here we will have more one plus samsung all kind of different brand apple iphone all brands are there right so now i want only samsung brands so let me run this comment see now i am getting only samsung brands now if i try one plus so like this it will be there okay see now you'll get only one record so in graph scale filtering should be achieved like this okay so graph scale only have only one endpoint only change will happen in comments like query comment or mutation comment okay so this is how it will work so now my my intention is in our sample i am going to add a small form that contains a text box and button so in the textbox user can search for the brands okay so i am going to implement that one for that what i will do i am going for forms bootstrap okay go to form controls let's copy this form okay and go over here on top of this table let me add this form i want this okay let's get rid of that entity and change this type to text and i am going to name it text brand so let's copy this and let's paste it in placeholder as well under extra brand and add name attribute since i am going to use model binding i will use same one like name and id okay so like such so what i will do i will create one variable like here selected brand okay this will be a string initially it is empty okay i am going to model bind it with the form so that i can read all the user inputted data so ng model i am going to assign now i will register to click with a method that i have to create now i will create a method like search by brand okay let's copy this and go to our component okay paste it over here now i will copy this entire code okay but my command will be different here right so first let's make let's create a query command for filter with filter data so i'll do like get will just name it from here brand filter and gql for query parser backticks okay let me copy this entire command paste it over here and get this get brand filter and as in as a value and we have to pass variables right in filtering variable this tab c variable this is variable tab so for that it will provide a watch query provide one more property like variables okay that variable i have mentioned right this main property name should match with this dollar name dollar after the name so i am copying that name and assigning here okay so this i am going to assign my selected brand value and there is one more change like the return type of this model is different name is different so what i will do i'm going to change this to my gadget i am replace this okay so everything good this should work as expected okay so let's take the output now see this is my uh small form search by brand and text so let me test for samsung okay see i only getting samsung so let me check for one plus see one place if you observe here request single query endpoint and here you can see along with query now variable also sent by our uh graphql client in our angular application so to pass some dynamic data we need to use the variables of the variable section of the graph here okay so this is how we can do samsung so this is this way we can get it okay so here we are not getting any cost and type data by so that is because we are requesting only those three properties only if you want all just copy it from here and paste it here as well okay now if i refresh and search for samsung see now i am getting all everything i am getting right so what we have did we we get we did getting collection of data and binding the table and next step we have did we are acquiring with the dynamic filtering data so next last thing we are going to do in this video is mutation mutations are nothing but saving the new record to the server so mutations are meant for mean for updating or saving the data to server means it will change the state of the database in the server okay so for that what i will do i will create a one more form here top of this set so there i am going to provide the fields to add a new record to this okay for that let me duplicate this form okay breakings land breaks okay what i will do i am going to create four dues means four test fields okay so this will be my txt product name so here it will be like product name okay and the placeholder i'm going to change it by product okay and here i'm going to change the name and id as well similarly just do for all like next is i will leave brand brand like this only in this name because i have already have brand right with id in search i already have text branded so i'm adding gesture to you can give your meaningful name so here i am going to change my text cost so copy that here copy that here and here he also forgot to change brand and in the place folder it is brand here it is cost and here we have to last feel like text type so let's do that extra type hashtag type so next okay so let me create a some form order to model bind with its form so for that let's go here and create gadgets form okay i'm making it any the reason i am not using gadgets because if i ascend gadgets here i need to send id write id in general in normal api we will send id as a zero for a save new record right some may not send some might say but if i use gadget text it will automatically sends that id but in the server side creation method this value is not registered so if i send an unnecessary property to the server it will throw error so that's why i'm not using the gadget saved because i have to create one more type so just i'm skipping to create a one more type for posting or saving data so i have used simply any but in real time please make sure to have it type so the properties are almost like this properties right so i will use name let's go to our copy this name okay go to our html in this model binding so this is for product name so gadget form dot products name next add its form dot brand next here i need to change cost okay and what is the placeholder cost okay this water is good so here i have to assign this cost and this is my type so this should be type and gadgets form.type so that's about our angular model binding okay so let's get rid of all this and we have prepared form with model binding and pending thing is like button so [Music] um name it as new gadget okay so copy this method what i will do i will add a one method here adjects okay so here what i will do is start apollo dot see here one more method is there mutate i should use that method okay mutate and it is also expecting some properties like mutation mutation is nothing but this so first let me let me explain the mutation query here mutation is query is almost looks like uh query parameters we have previously discussed means with some dynamic data so this is only changes mutation is there here also we need to we will have a variable object because here we need to pass some dynamic data right so i am explaining here over here again so this is my variable name reference so this name should be matches with the variable main property see this is the parent property inside of the my payload has been assigned so this name should match with this uh variable name okay and this gadget's input type this is the class name at the server this should be given to us by the server side developers we cannot give anything like that previously if you remember string this is the uh predefined uh data type of the graph here okay this is manually defined data type of the graphql nothing but a class name that is defined in our server so this is the name i have defined in my server okay so so my variable name type is gadgets input okay this will be i am assigning to this gadget's input see this is the name of the input parameter in the server of the method save okay so this is the server method and its input parameter name is gadgets this should not be changed okay because they are the server things we cannot change okay so this we this method will save the data and it will return the newly created gadgets object to us so here instead again i am just requesting the required properties once the record is created so here i am requesting all the properties in this example so now what i will do i am going to copy this putation command okay go to our application here let me create one more cost constant and post eq tactics and paste that comment okay you say all right i'm going to use that name here okay so this variable name is my own naming convention you can do your own naming convention okay so this is how we need to frame the mutation here only changes mutation keyword okay and now if you go down here here i need to pass that post save and here we have variables right because some dynamic data we need to pass as a payload that we have to do here and i have to create main property that name should be matches with this name so copy that other excluding the dollar sign and send it over here so what i will do i will create a form i'm going to take all these properties here from my from form i am going to assign here this dot gadgets form dot i am not directly passing the reason behind this is because of cost it is comes as a string but it should be a number right and now we'll format it restart get jets form since i am defining my own separate set of property right so here i can you gadgets type because it will be more type safety and the only changes i have to give id it is number id is number anyway i am not sending id in this object so i have changed it from any to gadget type okay here i am preparing another set of object right i am not directly sending the gadgets from that is the reason i am make it this object from type so that it will be more type save here also the good way of coding is we need if we create a one type for this object this object later that will be more good and efficient okay so mutate right this here we don't have like the value change property directly we can subscribe and it will provides us data and what i will do this start all gadgets dot i am going to add it in the top of the list this save is nothing but like this my api return i already know how the data will come so i am trying to access the save property but it is showing some error so let me do like this okay so everything and we are we are invoking the mutation endpoint and updating our all guidelines list by adding the new data my form looks much better right let me add contoured iphone x brand apple price and it is mobile okay let's clear the click on create it should be come here it is not coming let's see oh it is going 200 and we are also getting data see this is the property i am trying to get here but it is not binding the record is successfully saved see record also returning but it is not binding there is issue here cannot add property in our text object is not extensive okay seems like some this is acting like a non-extendable property so what i will do let adjects object dot making another mutatable or changeable object so what i will do gadgets dot unshift data so finally i will assign this new object to hopes this works simply i am creating a new object which is mutatable inside it i am just copying all my old gadgets into this gadgets object and after adding the old objects i am adding my new added record into it into the top of the list and again reaching to the gadgets let's hope this will work okay let's confirm see my previously added record is added but it is not reflected from the javascript point of view so let me add one more new product like f11 brand is apple and mobile let's create now see now it is successfully reflected okay previously it is not allowing me to update the array directly so what i did i just created one temporary data variable there it is notable means changeable there i am updating my new record and reasoning to all gadgets so finally i am able to see the added records here data those are the page so those are the basic steps like query and mutational basic step for consuming the graph scale endpoint so that's all how to use them using the angular apollo library makes us applications so simple and easy to consume the rascal endpoints very efficiently i think this video has delivered some useful information to you all if you like my video please do subscribe to my channel will you meet you again with a new videos guys until then signing off

Channel: Naveen Bommidi Tech Seeker

Views: 2,962

Keywords:

Id: GK_6XrduAiA

Length: 49min 30sec (2970 seconds)

Published: Sat Mar 06 2021