Getting Started In Spring For GraphQL With Spring Boot

hello friends my name is sarang so today we'll learn about spring for graphql so this is the official documentation of the spring photograph ql and the graphql has been finally integrated with the spring latest version 2.7.0 they have introduced a new starter which is a spring boot starter graphql okay so this spring for graph uh graphql actually replaces the graphql java spring that we use to create uh or we use in a project to create the graphql servers okay so if you can go to this spring initializer there is a spring for graphql starter has been added officially in the 2.7.0 version of springboot okay so in this video i'll be showing you a demo of a spring for graphql okay i'll be creating a project okay which will have the spring for graphql reactive web and the spring data r2 dbc for communicating reactively with the database and i will use the h2 database and for sure lombok okay so i have already added this project in my intellij okay so i will quickly show you the palm.xml okay so these are the dependencies you can see that i was showing in the spring initializer okay so this is the uh starter that we need to add if you want to use a spring for graphql okay if you look into the starter okay it is a nothing but a wrapper around the spring graphql that we used to uh have in our project to create the graphical servers okay so that uh starter is also having the graphql java okay so at the very low level they use a graphql java dependency okay so now let's get started so if you want to create any graphql project the first thing that we need to do is we go to the resources and we'll create a schema file okay under graphql uh directory so i'll create that okay i will keep the name of the schema file as schema dot graph qls okay so now i will create the types and inputs so the first type i will write as an employee the employee will have id which is of type id name string salary gain string and department id that would be int okay oh no so again this would be an id okay and now i will add a type of department so department will have again id as a unique identifier of a department and the name of the department and the department will have many employees so it's like a one too many relationship okay so these are the two types okay so now i will write queries for that so in the query what i'm gonna do is i will fetch employ by the name by providing name in the argument okay it will be of type string since uh that there is a possibility that the employers would be many with the same name so i will just return the array of employees okay and then i will also create a query for all department which will return the area of department okay so now i will also create of a type mutation okay so this will add the employee and i will pass the argument as add employee input which will be of type add employee input okay and here i will return the employing the response okay i will create a separate type for this and this will be of type input okay so here i will copy it name and in the add employee input what i'm gonna add is the name of the employee the salary the employee holds and the department id so to add an employee all that you need is the name of the employee salary and the department id so that's what i have created a separate type for that and it will be of type input okay and also using mutation we can also update the salary of the user so i will write update salary input update salary input and i will return the employee after updating the salary of the employee i'll give the latest employer details okay so let's again create a input for this sorry here okay for updating the salary we would need the employee id okay which is mandatory so i'll writing an exclamation mark here it should not be a null so that's the reason and the salary of the employee again this should not be null okay so we have uh we have written a query and mutations in the query we will fetch the employee by name and we'll fetch all the departments in the mutation we will add the employees and update the salary okay we'll also do the subscription in the subscription what i'm going to do is i will give all the employees in a real time okay so while while doing a subscription you don't have to since you're gonna uh in the real time you're gonna give so many employees okay you don't need to uh have the arrows of employees okay it should be only employee because you're gonna send multiple employees in a response okay so no need to have array it will be a different response for each employee so make sure in the subscription you never do or never pass an array if it's required you can in a single response if you want to provide so many employees you can have it array or in a different response if you want to pass on the different employees you don't you have to write it a single not in array okay so i think the schema is very is very much straightforward okay so let's go to the uh class so i will first create the data objects of all the types that i have written over here so there are two types and this there are two inputs for that i have to create a corresponding classes okay so i'll go here i have a long block so i will use the annotations for that i'll use annotations and now it's not getting loaded just a second okay so i wanted to add a no argument constructor here and all argument constructor okay that's cool so since i have added a r2dbc so we will use the annotation id okay here and which will be of type integer and i will add the name of the employee name and salary of the same type so i'll write it like so i'll write like this and of course i have to add the department id okay okay it should be e here okay so i'll now create for the department as well the annotations would be same okay so now the department have again id so i'll copy it from here quickly okay and it will have name as well and a list of employee okay so now we have completed two types let's create the class for add employee input okay the add employee input had a name salary and department id okay so let's copy it from here i think this is the same fields okay now let's create it for salary input again use the same annotations okay so it had a employee id and this salary of the employee that we need to update okay so i'll correct this one i will format this okay it's complaining i think the spelling is read okay it should be capital i okay so we are fine with uh this uh the data objects that we have created here okay now let's uh create the uh in a repository for employee and department since we have also added the persistence here we're gonna add the persistence and we're gonna add the data into the database and also fetch it when required so let's create interface of employee repo gt and extend that with the reactive crud repository okay the entity would be employed and the type of id would be integer okay let me create it for department as well since there are two entities so we have created the corresponding repositories for them okay i think this is fine now let's create the controller graph ql controller okay class graphql controller okay you can give any name you want i have just written graphql controller i would require slf 4j so that 4j okay i'll keep this as capital okay so here in the graphql controller we will try to add the annotations of graphql and query mapping mutation mapping schema mapping all these annotations will use too we will use to you know to fetch something from database or to add some something in the database okay so i would required the repository for that employee repository i will inject those first department oh it's a repository let's quickly add the constructor for that constructor okay they have been added here okay the first thing that we're going to look is we will we're going to add the employee into the database so anything that we added or update it's of type mutation so what i'm going to do is let's add the logic of adding the employee so i'll write public will return the mono since it's a reactive so we have to return the moon of employee add employee okay and at if you know at the argument we have also passed we have to pass the argument as add employee input which will be of type add employee input okay so we we have used uh at the rate argument annotation to uh to accept the uh the parameters that we're going to provide while queer while calling this ad employee mutation okay so what you can do is here just written this dot employer repository dot save okay and add employee input dot oh since we have to add the uh employee okay so let's create a mapping for that quickly add employee input will provide add input input and we have to return the uh employee okay so this is how to import the function okay let's create the object of employee first new employee okay employee dot set name ai dot get get name we will also add the employee dot set salary dot get salary okay employee dot set department id a dot a dot get department id okay and return and return the employee okay so we will use this mapping dot apply and pass the add employee input here okay so now we have created a logic that how to save the employee into a database uh using the employee repository okay so now uh since we're gonna call this method okay it will it won't be called directly okay so since we have uh used the mutation here so what gonna do is we will use a schema mapping okay the type name would be mutation okay and the field would be add employ okay so what we have done is we have used a schema mapping annotation which is coming from the uh spring framework graphql data which is uh in from it's coming from the strings for graphql starter okay here we have to pass the type name as mutation and what field that you uh that you need to resolve here so that we have added here add employee okay so this can be written in a very good way okay in a very short way sorry so we will uh comment this okay we can directly add mutation mapping annotation okay so this mutation mapping annotation is nothing but a composite annotation okay it internally it uses schema mapping only okay so it's good to use this one rather than using this one because you have to provide arguments here okay and make sure when you're using mutation mapping okay this should be same the method name and the one that you need to resolve okay should have the same uh name okay so since add employee here they also add employee here okay so that's why uh so if we if we query if we do a mutation for add employee so the the name of the uh mutation here ad employee will get map with the method name so make sure it should be same okay i'll remove this one because we'll use the short one okay so we have created a mutation first a graph ql uh uh we have created a graphql server with the one mutation okay so this is how you can create for query and all the subscriptions here so we will quickly uh develop it for all the other one as well quickly so uh the next one we will do it is a query mapping okay here we will provide uh employee okay employee by name since you know there is one query employee by name so this is what we'll write here so you can test this uh using a graphical ui that will do it after after i complete this query one okay i will write argument string employee name okay just written this dot employee repository dot okay so we don't have we have to create a uh our own method here flux employee okay ah get employee by name and will provide the name here okay so write it here like this and now we can write get employee by name and just pass the employee name okay so let's start let's uh test this to um mutation and the query thing okay so the one thing that i need to do is i need to enable the graphic well uh ui here graphical enabled equal to true okay spring dot graphql graphic equal enable equal to true it should be like this okay let's start the application still uh we need to uh develop all department query update salary okay we'll do it quickly after we test this two things that we have developed okay we can use the browser localhost 8080 okay it should be graphic well okay so let's wait for the application to start okay uh hang on so so before starting the application i need to first add the data into database so since it's a h2 so i have to you know add data when the application starts or boots up so i'll quickly do that schema dot sql and i have to add a data dot sql okay so i'll quickly create the schema dot add the content in it so create table department okay id serial should be a primary key and that should be a name of type where care 255 and should be not null okay let's create employee table as well okay since we are using r2dbc so there is no hibernate so all the tables we have to create uh prior to the application where care 255 not null and salary again where care 255 not null and right department id small int not null okay we have used will use the underscore so here what i will do is i'll go to the employ here and add the alias for that okay make sure it should be in double quotes okay schema has been created that means when we bootstrap the application these two tables will be created now let's add the data okay so insert into only the department data we will add the employee data we will add from the graphical ui name values let's create a software department okay so let me quickly create the same thing uh let's add some department that i remember when i was doing engineering electronics uh and one more let's add a management okay i think we are good we we have created a cmo schema.sql and data.sql file which will you know get activated when we bootstrap the application so we have only added the department detail okay and we will add the employee detail and we will add it using this this method okay and let's start the application quickly so i think this one is nothing but disable inspection okay the application is about to start let's close all these files that is not required okay oh there is a issue here the column software not found what is the problem here oh hang on it should be a single quotes it should not be double quotes sorry so make sure everything here should be single quotes okay let's start the application again hope so it will not throw any errors now let's see okay it should be m employee name let's see okay so the end point has been exposed at slash graphql and it has been started at eight zero eight zero let's start the graphical ui you don't require this let's go to docs and see here it is this docs are very helpful okay so add employee here we have we have written the logic for adder employee so we'll use this and we have added uh okay the spelling is wrong here so let me quickly rerun this i have just now edited here okay i have clicked on re-run so application will start again make sure you code along with me so that you can understand each steps that i am doing here so consider this as a crash course and uh for spring for graphql so which will be very useful in the future because no one is going to use graphql java uh in the projects now they will use this one because it's a very good wrapper so all all things it's now annotation based if you want to do anything with mutation just add this annotation if you don't want to do anything with query you just add this annotation okay so let me go to query now it's proper mutation is also good okay now let's uh send the data add employee okay add employee here i have to write i believe what the fields are name and salary and department id sorry i think it there should not be a double quotes here okay and also this okay it should be like this and uh salary he i'll just write one two three department id so i'll just pass one okay so my name sarang having salary one two three it's belong to department id one which is software all right and i want in written id name and salary okay let's see okay i got those only let's add a department id as well so we'll get the department id in response now okay cool so we have successfully set up the graphql server with add employee mutation okay let's test the query as well now we will write a query for employee by name okay i'll pass on the employee name sarang that i have just added okay i need name and again salary okay let's check oh cool so let's see did i add two people here yeah i added two times uh the same data so we got two uh employees here okay let me add one more okay now i have added dev problems uh okay i'll add i added a new employee so i'll query the same okay there is only one employee with the name dev prompts okay so you can see that it is it is working properly okay we have written uh mutation and query mapping for for two things okay let's close this server and let's uh complete the other query mutations that we need to complete okay now let's write it for the update salary if the user wants to update the salary then how we can do it in the server side is this will be a mutation mapping will return mono of employee okay update salary argument we will pass the update salary input object and then here we'll write the logic for updating the salary of the user employee repository first we'll find the user by id okay uh update salary input dot get employee id and then we'll do a flat map which will give us the employee that has come from the database and we will set the salary of the employee with the updated one dot get salary and then we will add that updated data of that employee into the database repository dot save employee okay okay i think this is fine so we have written a logic for updating the salary of employ okay so now uh we will we'll quickly uh will not test it okay we'll quickly develop logic for now what i think this is spending for query all department okay so let's add a logic for that query mapping okay so we'll write a public this this will be little challenging uh to get all the departments okay so the first thing is i have added few uh dummy departments when the application starts up this things get saved into h2 okay so now uh if you can remember here in the schema that uh we in the in the department we have many employees so it is it is of type array okay the employees employ detail is coming from different table and the department information is coming coming from the uh department table okay so now to do this in a graphql way will be a little different so let's see that so we'll return many uh or all the departments make sure this the name should be same and the method name should be same okay and what we're gonna do is we'll return this dot department repository dot find all okay it will give us all the departments but one thing is it will only give us all the department it will uh it will not give the employees okay so we will quickly test this logic okay so i'll start the application we will test two two things that we have written here so let's first check the update salary and then we'll check the all department okay let's see and whenever you start the application make sure to reload this ui because it will it will not you know show the data according to the new changes okay the application has been started i'll reload this thing okay i will quickly add one user deb problems okay the user has been added now let's see whether this user is can we fetch this user by name yeah we can now let's update the salary of this user mutation update salary so let's see what we need here update salary input and here i think we let's go to the uh mutation thing we need employee id and salary okay let's add employee id i think the employer id of that problem yeah it's one okay and the salary i will just write four five six it was one two three previously and i would name the name details updated salary of that employee okay yeah see the updated uh data has been sent in the request it was one two when we added it was one two three now it is four five six let's let's again check that using that query okay we are right fits four five six okay so we have done the updation successfully now let's do the one more query that is all department okay i think it doesn't require any arguments let's quickly check query all department no it doesn't need anything so department has id name and employees okay so for each employee i need id name just id name for now okay so see here i have if you can see the employees are empty here there is an empty empty we got all the departments okay if you can remember that we added all this department uh when we bootstrapped this application we have added the database h2 in okay so we got all the department but we haven't got any employee that is associated with that department okay so if you remember i have added dev problem user okay or employee into a department id one so here in this array there should be one employee with the name dev problems but there is no employer here and the reason being is we haven't uh write the logic or we haven't conveyed to the graphql that how to fetch the employee which is present in the particular department okay so that logic we need to write explicitly okay so let's write that okay so let's write using we'll write we'll use a schema mapping okay we'll write a type name so schema mapping is very handy it's very handy to you know uh resolve any uh field so i'll show you so it is uh uh query and sorry the type name should be department here because we need to resolve uh the field of department and the field is nothing but employees okay this is weird it should be only value and this should be oh sorry should not be double quotes okay so let's write the logic of that okay so we'll write flux of employees and employees here okay department and this thing is little uh a little change here i will show what will happen i'll just log the department uh id let's not log now let's return the particular employee from the repository okay we need to fetch the employee with the department id okay so let's write the custom method here let's create the custom method get uh i think it should be get all right so i'll just change with the get all or there should be only one employee get employed by yeah it should be get employed by department id okay i'll pass the integer as department id okay so we will get all the uh hang on for a second we'll get uh the depart i will get the employees that is which is present in a particular department get employee department dot get id okay so now what would happen is first we will get all the department from this particular method and then the graphql or the data fetcher will look into the schema mapping and we'll see that in the department for the employee field we have written a different logic so what will happen is the data fetcher will call or the graphql will you know in uh the spring will invoke this method okay to resolve this field called employees okay we'll also write a log here to check the uh which department uh is currently here is currently for which department this method has been invoked so department id i will write this department dot get id okay so let's see that in action so i will uh do this but i believe this should be get all right because we will fetch all the employees by their department id right so this should we get all and this is get all employed by department id okay um yeah let's start the application okay okay this is there is some unknown errors here which i'm not aware about terminate this let's start a new one okay the application has been started so let's reload the graphic ul ui so let me first add the uh employee into a department one okay so let me add this okay i've added now let's again call the get all department okay so now you can see in the employees we got one employee which is their problem the employee that we have just recently added okay but see here this method has been invoked six times and the reason being its invoke six time is when we called this method it has it written six uh six different department okay and because in the database there were uh six different departments okay and for each department okay this method has been invoked there are six so six times this method has been invoked to resolve the field employees okay so this might not be a good thing because uh this is a n plus one problem first of all and the second thing is here you would have you know got the employees detail from the different micro service or it could be a network call that you are trying to make so the number of department increases the number of network call will be increased to resolve this field employees okay so there is a different way or another way to resolve this thing and that would be using a batch mapping okay so it is one of the again a graphql annotation that you can use okay so this is little different how we gonna return the employees for those department is let's see we have to have the mono of map the department and the collection of employee make sure the return type should be this one only it should be of type mono on map the the map should be wrapped inside a mono and the map should be of type department and collection of employees okay so here we'll get the list of departments will not get single department we will get the list of departments so this is a change here in the arguments here we will get the list of departments here we will getting a single department that's why this method was invoked six times but this method will be invoked only once because we will get all the department at once okay in the argument so i'll just comment this one we'll just focus on this now so we just have to return the corresponding employees uh which is present in the department okay departments let's add it in a from it and let's flat use the flat map here we will receive the department object and i will use this to fetch the employees get all employees and department dot get id now let's use this collect multi-map which will return the map of department and employee okay employee so we just so we will get one employee uh we have to map that employee with the correct department so that's what we will do dot stream if you're not aware about this methods collect multi-map so please look into the documentation and get familiar with that okay it is one of the very useful annotations okay it should be departments here and this should be department will get the single department over here okay so we'll get department dot get id here and which we will just check with the employees uh department id okay so hang on for a second okay so it should be equals employee dot get department id so dot find first okay we will just find the correct department okay fine first start for that particular employee and we will return that okay so this is the this is the batch mapping so in the batchman you'll get a list of department in the arguments that you can use it and uh to you know find all the correct uh employees for that particular department now quickly uh let's quickly run this application and test this new batch mapping thing and then we are only left with uh the subscription thing so let's finish that okay but no i will also explain about the interceptor let's implement the interceptor and the client as well okay so the client means we are you know doing the or calling the mutations and query from this graphical let's call it with the real client okay we'll also do that stuff here in this video as well so let me quickly test this stuff first mutation let me add the employee quickly in the department one okay that has been added so let me add one more employee sarang in the department let's say fifth i will add these one more employee in the same department fifth i'll add one more employee in the department second okay i've added so many employees now let's check the employees which are associated with the particular departments okay so i've added uh one employee in the software department added uh one in the mechanical added two in the electronics so as you can see now the employees are getting correctly mapped with their departments okay and there is only one invocation of this method in the schema mapping there were multiple invocations which is equivalent to the number of departments so here there is there will be only one invocation okay now let's quickly uh write the subscription mapping so subscription mapping is like uh getting multiple uh or getting so many records uh in a real time okay whenever the data is available we will just in the real time we'll just pass it to the client so for that i will quickly show you one demo by writing this implementation so we'll return all the employees okay find all okay and we will delete for you know for two or three seconds so that we can see that the uh data is getting changed with every you know three seconds our data is applied in a real time as you can see in the schema i have written one subscription type all employ okay so let's uh start the okay before starting the application i will also uh write one interceptor which will you know whenever there is a request to our application that interceptor will uh uh will just get invoked and uh we can do a lot of stuff in the interceptor we can write uh we can do authentication authorization in that okay so just write server interceptor so this is a so let's write a graphql server interceptor okay the this scepter okay for interceptor we need to extend uh or sorry we need to implement uh web graph ql interceptor and we have to uh override one method that is intercept okay whenever you're passing any or requesting for any data that data will first intercepted in this graphql server interceptor okay so let's return the chain dot next and we'll pass the request so what we'll do is we'll simply uh log the request that is coming in so we'll write uh slf4j and log dot info we'll just write interceptor locks so in the request we will get the document or the request request structure that we will log it here okay so this was the uh one of the graphs so i've made it very simple i have just logging it you can do a lot of stuff here authentication authorization and a lot of things before the actual request goes to your uh controller okay you can do a lot of things over here in the interceptor okay now let's test the uh subscription and interceptor together okay we'll no longer need this schema mapping just remove that okay i have written everything in a single class just to you know save time but the video has been long okay but anyways uh just try to kept it short let's see now let's wait for the application to start okay so one thing i just missed when you're doing a subscription making a mapping you just have to uh add the end point for the websocket so the subscription works in a uh in a graph in a web socket because it continuously gives you the data so i have to enable the graphql websocket and add the path as a slash graphql okay you can give any path so i've given the same path uh which is used for the http post or http uh server okay so one more thing i want to add it here so we have we we are using a controller okay so this is a very this is a http graphql server that we have built okay you can build the websocket graph uh ql server you can build the uh our socket graphql servers okay and do the same stuff that we have done okay this stuff will remain same the only thing is the transport layer now the transport layer is http the transport layer can be changed you can use a web socket you can use our socket anything you want okay let's quickly uh refresh the graphical ui and let's quickly add one one or two users i'll add one user kumar i'll write i'll add myself sorry i'll add deb problems okay i've added three users now let's stream that data in the graphical ui using subscription okay all employees so here i need the name of the employee id and salary and department id so you would see the data is coming in a real time okay it will come in a duration of three seconds so see now we have a user employee with kumar now it has been changed to sarang now it will change to dev problems in every three seconds so that now we have seen the implementation of subscription mapping so this is the logs of interceptor okay what interceptor is doing is it is intercepting the call and it is uh has locked the document that uh the document that we are passing here so it has uh logged this entire document okay into the console okay so i just wanted to show here that you can uh do these things in a intersector as well logging the request and all okay so now this is fine okay so uh till now what we are doing is we are sending a request from the graphic ul now let's create a proper client and uh a client will not create a client server here i'll not create a different application for a client we have built the graphql server here so we will not create another project for graphql client so what i'm going to do is here i'm going to create a http graphql uh being here okay so just give me a second i'll just create a bin for http graphql client okay so let's create this so since our server is http graphql so the client should also be http graphql client okay so i will create that bean bean it should be using http graph okay graph ql plant it will accept no parameters and will let's return the sorry let's return the object of this let's build it i have to pass the ur url of our server so our server is running on 8080 so i will give that port and uh it is listening to a graphql endpoint so as you can see maybe if this available i'll show here our application is exposing two transport layer one is http graph slash graphql and another one is a web socket okay so we will for now we will we have create a http graphql client okay you can create a websocket client as well if you are developing a graphql server in a web socket transport layer okay now let's create a get mapping so in this server itself i will uh you know i will create a logic for getting information okay so i'll just write get mapping here so i will get the employee by name so i'll show you employee employee by name or document so i will send the request detail here and then return okay i just have to auto wire the http final http graphql client okay and add it in a constructor parameters okay this has been added here so let's write http document and retrieve the employee by name and two entity list employee dot class okay we need to pass on the document here so if you remember for employee by name uh we created a this document right this uh type of request so the graphql uh client will request for employee by name okay so what so what will happen is uh hang on sir there is an error here i have to remove this so what will happen is i will create i will call the get mapping here okay so i will write the same name okay so what will happen i will uh invoke this rest call okay sorry i will call this rest api with the employee by name okay so what this will do is it will call the graphql server which is nothing but this project this is a graphql server okay it will call this and try to get the employee by the name dev problems and give us in the response okay so this is the rest api so this is this i'm doing for just a demo purpose you can create a different application and you can write these this thing okay since i've used a git mapping i just have to annotate with the rest controller okay now don't think that previously it was controller now i am changing to rescue controller controller that means the graphql queries and mutation will not work it's not like that it will work in any transport layer it can work in rest can work in a websocket our socket as i mentioned okay now let's start the server okay so i have written uh the client is only will only call the employer by name you can write it you can write it for all these query mutations but for time being i've just written for one to showcase you that you can create uh how you can create a http graphql client okay okay the application has been started so for to get the employee by name first we have to add the employees so i will add just one employee debt problems so that's what it's there here it's same name i think yeah that problems okay so now let's invoke this one generate a http for this and i will execute this one it should give me a dev problems in the request yeah it has given me a debt problems okay and the response here you can see here http request this is the response since i have not asked for the department id so it's null so as you can see in the request so this is the request here i've only asked for id name and salary that's the reason it has not given us the department id i hope uh this was a good session or good project that you can that you can start off with to learn about uh spring for graphql okay and if you like this project and the video uh please hit a subscribe button and subscribe to the channel and uh obviously like the video as well okay i think uh this is enough i have i have covered all the you know basic and important and annotations of graphql mutation mapping query mapping and subscription mapping also given you an uh a brief about what is interceptor and how you can create a interceptor for your graphql server by implementing the web graphical interceptor and how you can create the graphql client okay this should be in a different project but i have just added in the same to just for showing you the demo okay that's all uh and thank you for seeing the video so see you in the next video thank you so much

Channel: Dev Problems

Views: 12,520

Keywords:

Id: H_U2Bu75Ohc

Length: 61min 21sec (3681 seconds)

Published: Sat Jun 18 2022