GraphQL Subscriptions In Angular Using Apollo Angular Library

hi everyone today video is on graphql subscriptions in angular by using the apollo angular library okay so first let's understand what is subscription in graphql okay so uh before going any further i want to mention one thing this entire session what i am going to explain has been already made as a blog so if you want to check the blog the link will be available in the description under the video so you can check the link for the blog okay so this is my blog okay so let's first understand the graphql subscription flow okay so let's have a look at this image so if you observe here there are uh two main components like uh two main comments like mutation and subscription i think commutation is i think mutation everyone will have idea nothing but updating data into the database or any data store okay so subscription subscription is also one of the main command in graph scale like query and the mutation okay so how subscription work i think this is like a some admin tool or any any kind of admin interface and updating the updating some data or sending some data into the mutation so instead of mutation there will be a uh event raiser so whenever that event riser executes what it will do it will store the data that was passed to it in some storage something like either in application in memory storage or distributed storage like radius cache is something like that so on saving that immediately in the subscriptions there are few resolvers so appropriate subscription resolvers will listen for the changes that were made by the event sender okay sorry made by the event sender so subscription what you will do it simply listens for the changes raised by the event center so on receiving the changes subscript subscription uh it will distribute or send those data to the client subscribers you can see here client subscribers so this is the flow of graphql subscription okay so to implement graphql we know the best library is uh apollo angular library so it also submits subscriptions so what we will do we will implement the subscription and for this demo purpose i have created a dotnet graphql endpoint okay for my demo purpose so that is this so i am going to use this endpoint into our angular application okay so before going to angular application let me show how subscriptions in graphql works practically so i am running this project and these are like if you see here this is graphql endpoint and this ui editor are displaying on browser is nothing but the default interface provided by the hot chocolate graph scale okay so if you observe this tab i am adding some products okay so i am what i will do i will change like okay and it like turn this on okay so i want to send it to the server so from the image point of view this mutation is this this block okay this tab is this block and if you come to the next tab you can observe here this is my subscription tab you can seek the keyword subscription and what are the this is subscription resolver name and these are the properties i am expecting in the output okay so that means this one okay now let me run my uh mutation method see so i have successfully sent to the server and you can observe here output for 20 000 if you want you can change it to some van and turn to server it's sent to the server and now here you can observe automatically subscriber features the data means this is a continuous process okay so one thing is we have to remember is in mutation we manually invoke the api right so here what what kind of call it will take place means http normal call only okay but here i am not invoking but it is always listening for the server changes so here we should have persistent connection or long live correction so this connection will takes power by web sockets okay so is how graphql subscription work and our goal is uh from our angular sample application we will create one publisher publisher is nothing but the data push it to the server okay so one publisher component and one subscriber component subscriber component is nothing but where we are going to implement our subscription uh logic okay uh i think uh that's fair enough to give you the knowledge on server side okay so let's begin by creating the angular application so here is my angular application that i have just created okay now first thing is we need to install the apollo angular library okay so installing using ng command angular apollo library is very easy and all the configuration will will be taken care by the ng command okay so let's run that command so this is the command ng add apollo angular let me run so our library has been successfully installed okay it will automatically create a one module file like in the src in the app you can see graph module okay here we need to configure url and everything so for implementing graphql query and mutation this installation is enough but i have mentioned right subscriptions are relay rely on web socket communication so we need to install two more packages to support the websocket instance okay so let's install them as well those are like these comments one is subscriptions transport websocket okay first let's install it so here is the package that's successfully installed now let's install some type script related to websockets so from this you can understand this is devo dependency okay so that is also installed successfully so we are done with the packages installing now come to the graph module we have to define the url here so that whenever we use apollo instance for communicating the graphql endpoint it will take the url that we configured here but now the case is we need to have both http and w websockets right so we need to have a logic based on the operation that's going to be triggered from our angular apple application okay so based on the operation url or the communication uh type should be switched okay so something like if you if our application is working with the query or mutation then it should be taken care by http if it is a subscription then it should be taken care by the web socket so that logic we need to implement here okay copy the url here okay so here what i am doing here i have created a http constant where i am getting the http link instant okay okay now i am creating one more instance that is websocket link so that slows from apollo click link slash ws folder so here what i am doing here i am configuring uh url for websocket so here the proto protocol is not http now wws so since my uh server application runs under https here you can observe https so i'm here using ww wss for suppose it is a non http because then ws is enough so i am using wss okay for a secure web socket now here we have configured option like reconnect we need persistent connection right so we should enable pro okay now what we have did we have created instance of http and in the instance of the websocket here we need to import um okay so here what i did here i created uh one more constant link and i use a split that loads from the apollo client code okay this split is like a ternary operator okay uh inside it will contain say anonymous function so this is that anonymous function it should be a boolean type based on the boolean value it will return instances so here if you observe based on the operation type if it is operation definition and it is subscription if this condition is satisfied then it will return ws or else it will uses http so you can pass the link here right so finally from this code what we can understand we have created instances for http and websocket as well but based on the operation we are loading the appropriate instance okay so that is the logic needed in the graph module okay now now what i will do i will create two components one is publisher and another is subscription so let's uh first create the publisher here is my uh publisher component so what this component will have it will have a small form where i i can integrate the mutation logic so that on form submission that data will be posted to the server so inside of server we know that right instead of mutation we have written some event tracer call so that will raise the event so first let's add the form so here is my uh forms snippet where i am having two uh input fields one for entering the product name and one for uh entering the product price and the submit button so what i will do in component let's create the properties for the two-way binding okay now let's use 2-way binding okay and now let's create a method to for button submission and first we need to inject the apollo instance into our constructor okay that loads from apollo angler so first what we have to do we need to frame the command for our mutation for that i will go to my server side tab that i have previously shown right so i will copy from there so this is my uh constant so copy it whatever here on top i will create that mutation command so constant uh product post to use to wrap it that mutation command we need to prefix with gql that loads from apollo okay so that ticks and paste here our command so here my mutation command this is my variable okay and this is my resolver method okay okay here i need to specify the my constant product post and we have to ascend variable right so variable and what is my root variable name this one my product so i should define it here and i simply pass my product because these column names will match with my variable names here these names okay so restart product form okay and finally we need to subscribe for it i'll just console all the data because i in this sample i don't care what type of response from the mutation so just i'm simply console login okay so that's all about the logic for our publisher just we need to create the mutation so if you observe here apollo instance will get the mutation url from our graph module based on the type of query here query invocation type is mutation right so here here it will be false false means this one will get written from this split method this http will be the output for the link okay now next thing is i need to do few more configurations since i am using model binding right so in app module i need to import the form module okay import that module as well and let's also import our component here what is our component products publisher component and declare it in declaration areas okay and let's create route as well in angular routing module here on both i will use my publisher component okay now let's create the subscriber component so subscriber component will contain uh implementation to our subscription language subscription logic i will first inject the apollo instance into my constructor okay now and uh apollo angler when we go to our uh what i can say i need to go let's take here itself this dot apollo can provide watch query query create and mutation operation but there is no like subscription this subscriber is different this is like rxjs subscriber okay there is no subscription like watch watch query query or mutation or create okay so why like this okay so subscription from this you can understand subscription is not directly available from the apollo instance okay but uh when we look into the subscription subscription also similar to the query right but query we manually invoke means it is single time it will request and get the response that's it whereas subscription it is a persistent connection or long load connection it's always listens for the server side responses right okay so it is subscription also similar to the query only so what we can do to create the subscription we cannot uh directly create the instance of the subscription so here what we will do first i want to capture the query reference okay okay that's not from angular apollo only here i can specify any okay what i need to do i need to implement the unit okay on it life cycle method implement it now what we will do we will create a fake query very common okay from that query instance we can create the subscription instance okay got it means why it is like that means for suppose uh in in your scenario initially we want to load the data from the database okay for that what we will do we will query query will fetch us all data from the database one time okay next time onwards you don't want to manually invoke but any newly added record if you want to get means then you can use the subscriber instance okay so by keeping this scenario apologial has been implemented the subscription but our scenario is i don't want to load any data initially but i want to subscribe when all the data is pushed from the server so to implement my case from the existing case what i will do i will create a fake query okay that query i never call on i never invoke that query but by creating fake query i will get the instance of query so that i can i can create the uh subscription instance from that so for that reason i am creating the fake query so let's uh create some fake query command okay i have mentioned we should wrap it in gql okay that loads from apollo and back ticks and defense syntax like query and fake anything you can create okay now i already need what i will do this dot query ref equal to this dot apollo dot watch query okay and in this query i will call fake where that's it i'm not invoking invocation only done when we subscribe it but but i do i don't subscribe here okay sorry this is not in on init ngon in it it should be done in construct only okay now i have query ref instance memory now what i will do i will create a method like subscription okay so here this dot query ref dot subscript subscribe to more okay this going to listen for the or invoke the subscription operation okay so here here what i can specify i can specify document okay document whereas query will have query admittation right we don't have something like subscription command it will give the option like document so here document i need to specify my command for subscription so let's create first command for subscription command okay so what i will do i'll copy it from the my server editor is this one so there is nothing specialty in this command similar to query or mutation this is the keyword to represent to the what type of command this is that is subscription and inside this subscribe product is nothing but my server resolver means server side one of the method name and these properties represent uh the payload that i want what are the data i want i want name caution created okay now here i can specify sub command okay now here we will have one more property like update query okay which take anonymous function like previous data okay previous data and subscription data is nothing but the current uh response pushed from the server okay now what i will do it's returning some product data right so i will like product i will save any now this dot product equal to subscription subscription.what data. and what type of object my server returning i need to check from my editor inside of data property there is so let's copy this and come to our terminal okay so amazon now on html side i simply just display the data whatever i am going to invoke subscriber okay and simply use url what is product variable my product and li okay name product dot name so i'm going to get two more properties right cost date cost so these are all properties i want to display right now that's it what we are doing in subscription we are injecting apollo and creating the variable of query ref we know that subscriptions are not directly available we must invoke some watch query in my case i do i don't have any data to initially load so what i'm doing is simply faking my data and then from the query ref instance i am creating the subscription and update query will always listens from the latest data and one more thing if you want initially load then you should subscribe here here okay and one more thing is that uh but i can say it should not be fake here it should be original command here and also this return shape should match with this return type okay since i am here using fake right it never executed so i don't have any problem but if you are loading initially data this subscriber response type must match with the subscriber means query response time okay please that point and we are done with the logic let's do some basic configuration like in app module let's load the subscriber component as well okay and let's go to our app routing module and create one route for it i will create like sub component okay so these are my root paths let's run our application should be small cube okay in fake query also it will check syntax okay it should be very clear okay what i will do i will remove initial css and styling app module just remove everything here and save it now you get form right now let me open my subs as well so whatever i'll create sub okay initially no data here also so think like these are two clients are subscribed to my graphql server now this is my publisher right i'm posting posting okay i haven't created the click event let's go to my publisher component html at the right click ok not at directly brackets click and i need to specify my publisher method name submit form okay let's save again and now reload our app and let's test again okay i'm getting some measure okay that's my server ratio give me two seconds i will enable cross origin at my server okay i'm skipping that from the video so i am back again cross version is fixed at my server so let's try to run again my application angular application okay cost is decimal at the server okay so in publisher component what i can do i can do initially 0 so that it will be a number value and again is current 20 bucks let's check over here simply what i will do instead of directly assigning the products okay name is start product name and cost i will format it this dot product form dot cost i think it should be fixed now let's try again okay semicolon 100 works here it is 200 let's check here here it is no data not subscribed subscriber method need to be invoked means registered in the on in it once we registered that we'll start listening to our option okay i hope now everything get good ice cream costly is 200 bucks now what i am adding i am getting the data so this date is from the server let's check my other client as well see here also i'm getting data see this is how subscriptions work let me change it to another data like i want to buy a car and it should be some [Music] first clicker let's submit again and check c car subscriber data automatically it's receiving data because it's always listens for the let's try one more time like when it's same cost see here i'm getting ram here also another client ram okay so that's how uh subscriptions works for us so in real time scenario something like notification that kind of scenarios subscriptions will work very easily okay and that's all about the uh using subscriptions in angular by using the apollo angular library okay i think this video has delivered some useful information to you all if you like my video please do subscribe to my channel we will meet you again soon until then signing off

Channel: Naveen Bommidi Tech Seeker

Views: 727

Keywords:

Id: gRou_6z4uD4

Length: 44min 28sec (2668 seconds)

Published: Mon May 10 2021