How To Use GraphQL with Ruby on Rails - Part 1 - Backend

hey guys this video is gonna be about using the newest language in kind of the buzz out there called graph QL with Ruby on Rails consider this a part one so there'll be a second this one's focused on the backhand side that essentially integrates graph QL with Ruby on Rails Ruby on Rails is of crud based framework so that's create read update and destroy and while that concept rings true in the routing the idea is there is a single end point instead of like a post endpoint or a put in point or edit in point or update and I should say in typical rails apps so this one's gonna focus on having that singular endpoint and the terminology is a bit different with graph QL so there's things such as mutations and also just query and queuing this up and figuring it out is a bit different than normal so we won't actually even use any kind of controller logic in this it'll be more or less a new folder that gets added to the rails app that's called graph QL inside that they'll be a types folder and the types kind of correlate with the models so when with a graphic you all type there's a model under the hood that you kind of define as a type and go forth and kind of manipulate data as you need it so there's some high-level concept here that you might not be used to if you follow along with my stuff before this is new to me too so I'll have to kind of flesh out some things on my own I might hit some errors but we'll do it together so I just want to run the initial app get it set up the initial idea is that it's a blog so we'll have a user model in a post model and then within that we'll kind of use graph QL to expand on the data side of it so we can query just like here using graphic QL to get the data we want back rather than using a typical controller logic maybe in a rails app so basically there's no visual in this app so far so that's like I said there's going to be probably a second part that to this that's gonna be the visual side of it we'll probably use something like react all the frame we're gonna do the graph QL querying and stuff just so it's easy to for you guys to understand because I think trying to admit that yourself is gonna run into some issues right now because graph DL is still a little bit new to the game but we can get into that in that part so what I want to do first is just essentially quit this server and start a new app and I'll just kind of do a new in my directory here I'll do rails new and I'll clear this out rails new call it graph QL fun demo and we're gonna use API only mode for rails so we won't actually have any view layer with this and that's kind of the whole concept of this I've been asked before to do an API version of this and just kind of use something else to hydrate the views and so that's gonna be how this works right now so with the API model we'll actually wanted to skip tests to kind of save some vein with their we don't really need to test at this point it's more of a demo so that's something could add later if you want so I'll run this app it's gonna be API driven there's a few things we'll need to do to set this up and make sure it works with our app I've run in this too I'm fronting this before where it's gonna use rails 6 but the API version uses our rails 5 something so we might need to do some tune ups to fix that up right now so we'll see what happens when the app is booted I'll go and actually CD into what did I call it now do this one here I'll copy this title CD that and then I'll open this in my code editor and let's double check our gem file or Ruby to 6/5 rails 6 so maybe it is gonna work for us previous version I built this on was on Rails 5 something I think it was maybe a fluke but we'll see so with that in mind we can start to generate the initial models we'll use so we're gonna make use of rails as we would but the key thing is to remember we're gonna need some graph QL logic under the hood but we'll get to that when we get the models set up so we get that actual data layer set up now so let's do that real quick I'll do a generation rails generate and I'm probably left its up for you model user email it's gonna be a string name string this won't have any authentication we won't use devise or anything like this this is basic just here's a user model with two things on it so that's something you could add later but I'm trying to be very simple here so it makes more sense so I'll generate that let's hope it works there we go okay and then we'll do one more rails generate model post and we'll say user belongs to title string and body text okay great so I'll just say rails DB migrate alright so we can check our scheme out at this point and you can see what's going on posts we've got these our ID null is false on that one we could that's like a news newer rails thing to say it's you know you can't be false other than that we've got the user model and the post model one thing we need to go ahead and add to the model on the user is has a mini post or you zermatt our post model today belongs to user since we did that in the generation so that should be all set up on the data layer and then we can just double check our gym file we're gonna basically go ahead and use the defaults here notice without with the API mode there's really very little gems being used besides some debugging stuff for development environment then in the development environment when I started this video we had a handy helper GUI that's good for querying graph Keele in the browser so you can just it's called graphical and you can say graphical rails to boot it up will also make use of in fact I'm gonna put this just in the development environment here oops Jim graphic whole rails and then Jim faker we're gonna seed some data and rather than type it all in create a crazy amount of seating we can use the faker Jim to do so just super handy so let's run bundle install we get those installed you just run bundle as well should go ahead and go and install those things we've got faker here now which is good in graphical graphic URLs great so while we're at it with faker why don't we seed some data in the DB directory there is a seeds file and here's where you can like to find some seeds you want to do I'm gonna make some loops just some ruby based stuff and generate some users so user dot create name we can get that faker Jim into play here and you can check out the docs for more stuff to use but there's there's a ton at your disposal but this is essentially what I use for this video internet email and we'll do a within that five times do we're gonna generate some posts for that user so we can do I'll just go ahead and close these out so I'll have that done we'll say user dot posts that create title will be faker and then we'll just use the lorem ipsum class sentence like I said check the docs this stuff's pretty straightforward three we have that body filled too so we'll say body faker warum paragraph and sentence count leet three let's check our work here user equals user creates name that name email my times do user post create title faker yeah I think that's good so at this point we could try to seat it and simply doing that is down this way so we could say rails DVC and hope if nothing outputs and no airs happen this should go ahead and you know run the actual seed we can verify this pickle in a rails console and say like user dot all and you'll see some users in there that were generated same with posts post at all there we go so cool we have data now that's good we're gonna need that to query anything so that was the whole point of that so with adding that we can go ahead and start the graph QL installation so what we'll do there is some generations using the graph QL Jim and that's gonna look like this once you install the Jim you can run this so graphic ul install okay notice how much it creates which is quite a bit but there is new a new folder in the app directory called graph QL and it's gonna have types directory and there will be an mutations one that we have as well and mutations you can think of as just modifying the data in the data base and then types are a way to sort of query for it or do relations and for build these queries based on graph QL with Ruby and so that's the Ruby port of it if you can think of that so we can make sure we go ahead and run bundle and make sure we have all our dependencies there if you notice on the route it's gonna create a posts to graph QL and graphic you execute and that's essentially all you put in your routes file that's the cool the beauty of graph QL in my opinion is there's like no concept of adding specific routes for things you need it kind of just has it under the hood we're gonna modify this coming out to do some stuff with that graph graphical interface but for now that's that's essentially it in our routes file which is pretty handy so with that installed now we still need to run the concept of our models as graph QL objects so we've already got a user user model and a post model but we need to create graphic ul objects containing those and that's another generation that gets added if you just save rails generate you'll see a new graph QL column with different stuff we can add here so we'll do the same we're gonna use this object one in particular now so we'll say rails generate you can say GE to graph QL object and user cool and then the same for post sweet so it added a as you can see it's a new type in the graph QL folder if we go back up to the app I'll show you the actual look and feel that so we've got a new types folder a user type in a post type there's some base types in here that are just ways to kind of build upon certain things you might need within a query so it gets it gets in depth you might want to check out the graphic UL documentation to kind of get more background of what these things are and how they work there is a schema file in here too which will basically import all the mutations and queries we build based on the types that are in these folders so it's just this is kind of like the Holy Grail file as you can see so with that installed we should be set to start building some of the queries but we need a way to visualize it and probably do it a little more easily and that's where that second Jim comes in that we've added in the beginning so in the Jim file there's a graphical rails it's called graphical where else that's going to be just the GUI that we can use on the localhost sickle go ahead and execute the queries in line so that's what we're gonna go back to the to the Roth's file and modify that a bit so we could say if rails environment U and V dot development and we could say IND this is going to be outside of the scope of that but this will be the graphical one so mount it's gonna be its own class graphic QL rails engine and then we'll say at and then we'll give it the path we want it to you can put whatever you want here I'm just gonna use the graphical namespace there and then graph QL path is the route below so we'll say graph QL execute and modifying this probably deserves a reboot of your server if it's running I don't even have it running yet so we'll still need to kind of boot that up let's see let's see if we get any errors I did run across some errors at this point if we boot up the server so if I try to go to this route this is the old app see if we get we get a loading at this point nor outmatches this so there is an issue right now that I'm running into or that ran into that's dealing with sprockets engine in the application file in the typical rails app so when you run it an API mode there's this kind of gotcha that we need to sort out in this file here what I ended up doing is uncommenting this sprockets rail tie and on top of that we need to create a asset pipeline manifest file so that's gonna actually be this is normally generated by default a new rails app but if you create a new folder in here call it assets inside it we need a config directory so config inside it we need to manifest that j/s file and we'll need to link two things which are the CSS for graphical and app the jas for graphical that are gonna linked into this tree so my theory is I think this is just a oversight on actually installing this that wasn't quite in the documentation but I found out from searching of course Google is your friend in this case so once you add this reboot your server and hopefully we should be in shape yeah okay cool so that essentially loads the JavaScript and CSS needed for this defender if we're go to any other routes in our rails info routes we're just gonna see the one basically that's the graphic you all stuff and then of course the rails mail lock stuff that's comes with rails 6 actually mailbox I should say so all are gonna be concerned about in this video is this graphical UI but essentially at this point we should be ready to rock and roll now the key thing to think about in the graphical side of things is building that query to come back with the right data and this is gonna be defined in our user type so right now this looks like this and again this is all stuff in our graph QL namespace folder here we're not going to touch controllers there is a controller here that does the execute you can check that out that's more or less just doing that that stuff behind the scenes so we don't have to worry about it but there's some there's some nice stuff here to kind of check over and see how it all works you might dig in there but the one thing I want to focus on right now is the user type and we need to create type stats so that graph kill knows what kind of data to send back and here I can specify what columns the methods and more that will return to the app so we can actually think of this as like the model there but in the graph QL world so what I want to end up doing is specifying the fields we're gonna return and then also some methods that we might want so like say in a blog case maybe we want the post count of the specific user so I'll do that so it's gonna look like this and here we actually doing some type checking so it's kind of nice that we are given this interface to work with so here we're passing the ID it has an ID attribute this is the type coming back in null is false so it can't be blank for name will have that name field and it's a string type and null is we can set it to be true if you want field email string null again can be true if we want and notice I'm not doing any comments after these that was a gotcha on my own then I did so the tricky part here I guess would be returning the post so our users posts how do we return that and that looks like this he could say types post type and notice these brackets here indicate that it's an array so it's gonna return an array of objects in that sense that are the post itself took me a little while to figure that out but it does make quite a bit of sense if you're just you know quickly looking at this and then finally you can create methods within this type and what I'm gonna do is create one called posts count it's gonna be an integer so it basically just returns a number and no will be true here class will have a def posts count and you could build way more methods out of this and you know return certain things but the way it works is object that posts sighs so object in this case indicates we're able to return in the query a post that count method that returns an integer and then once we call this it'll actually do some Ruby just to go ahead and perform that active record kind of querying within a typical rails app so we can get the post size or count whatever you want to use here count is probably make more sense but size works as well so hopefully that makes sense and we can move on to the post type and do something similar this one's a little more simpler but we're gonna pass the field of ID integer will be that one and null will be false Oh see I did the thing with the comma we don't need that field will be title on this one string null false and then body since those are our columns on the database cool so the main query type is within our schema and like I said this returns essentially all the types in this folder we get the mutation type and the query type and that's how that works inside that we're gonna go into our query type and define some stuff here right now there's some basic stuff and this is where the essentially you define the queries you're going to go for so say I wanted query for all my users or a specific user or a specific post etc and in this case we're just gonna focus on the user concept so I'm gonna get rid of all these comments and we'll say to get all the users I'm just gonna add a comment typically you do user dot all in rails and that works but we actually need to think about how to do it with graph PL so let's say field we're gonna say it's called users and this is gonna set up an array that's gonna return all users in object form within an array for graph QL to go ahead and query for so this sets that up we still need this concept of users though in this query type so there's no way to kind of dictate what that would be and unless you do something like this so user dot and should be user so as you can see it's it's mixing some rails stuff you might be familiar with with the new graph QL logic that returns the data we need in the way that it's gonna hydrate with so the same is true if we want to say a user to return instead of an array we're going to return a singular object and it's gonna be it's gonna be types and we're gonna use user type and we'll say nulls false and do within that block will return the argument so you can actually pass in arguments too and it's going to be the ID that we're gonna get and we'll stay required its true on that one so that in theory looks like this in Ruby me the brackets and instead that will say user that fine ID so that hopefully that makes sense that's kind of a mix of graph QL world with Ruby world I think once I started seeing this stuff I was like uh okay and then you kind of this gets translated to the same thing here but this essentially makes it accessible via the main schema we're passing that query type through so that way we can actually from that endpoint do what we need to query for the specific users in the database we work to go ahead and parse this you see there we go so a typical query looks like this if you want to just refer to the users you can actually clean this up and just use without that query name and just use graph QL notice there's no punctuation whatsoever justice users with an option open brackets here name email post count post count refers to that method we created before so that's kind of a handy thing to add if you ever want to update the query you totally can just you know remove something for us to go and there it goes suppose count move that back very good and say I want to find a specific user so we can do the same thing just say user - I'm gonna say ID - and we need to open a bracket close that other bracket and we could say name of that user email posts and get the title of these the posts itself so there we go and that's all the titles coming back if you want to add the body as well we can do that so there we go so that's all relative to the specific user so you see how cool that is we're not doing any kind of like fancy logic it's just once that query is built you can return whatever you want and essentially like if coming up we'll we'll use this and more of the views but a lot of your querying happens actually in the view layer as opposed to maybe in your controllers which is kind of nice in a sense because you could always change it and bring back the data exactly date that you which is I think a big sell for graph QL you're not returning data and just using certain things you're just returning the data you need and using it at will okay so that's querying for data there's another concept called mutations in graphic UL that's essentially creating or you know modifying data and it's a little more involved but we can go ahead and create a concept you know show the proof of it working here so inside the mutations folder I'm gonna create a base class simply to kind of keep the clutter out and it's gonna call I'm going to call it base mutation Darby this is gonna be a class called mutations base mutations and then we're gonna inherit from graph QL schema and then one called real a classic mutation I got this from the docs so I'm not saying I know exactly what this entails but the idea is to inherit this specific file into our other mutations coming up that are gonna allow us to do certain things so some terminology to kind of throw into the mix here are there's arguments to mutation and these are typically required and because you're creating something or modifying something so maybe you need a ID or a name attribute or an email etc to update so that's kind of where that comes into play you can think of these is something like this strong parameters and rail and a typical rails controller we need to kind of whitelist what's coming through on top of that there's the fields and what these it's like an accepted argument so if I want to return a user field with our new model accompanying with an array of heirs if any exists so it's kind of one of those things of when I create an easier I want to return that stuff if there's anything wrong and then there's a resolve method where we execute active record commands it's going to return a hash with the keys to match the arguments or fields so I know that's a mouthful so let's put it to practice and we're going to create one called create user that's in the mutations directory here so what we'll do is inherit that based mutation so mutations base mutation we got that class to work with now so that's inheriting this guy so we don't type all this basically in these that's the whole point and then we're gonna go ahead and add our typical creation of a user so each each kind of file would be the actual mutation being performed so here's the argument portion argument and we'll say name so these will be what you pass in to create the new user so think of it like that so to create a new user we need an email and a name at this point and then the field itself will be a user and it's gonna be the user object but also known as a user typed and graphed you all will say null it's false and the field we're gonna return these two things so will air and it's spelt that wrong it should be this airs will return an array of errors if there are any so it's gonna be string formatted array null will be false and then the resolved method I mentioned looks like so and it's gonna contain the two arguments just like this email inside that will do the Ruby you might be used to so user new name name email email and then we could say just like in the controller layer we typically do like if a user's save do this and then do that we here we can just say user user let's go ahead we're gonna return in the case of the graph QL instance and then empty errors object since there are no errors and then we'll say else I don't like this indentation right there okay else will say users null or nil and heirs we can return thanks to rails there's this built in errors logic full messages and then you can render those messages so that's essentially what we've got and creating a user so we build our arguments they're gonna be name and email because that's what we need to create a user and here is the return portion of the user so you can build what you're gonna return once that new user is created once it resolves will return the user itself with no errors otherwise we will turn it into user object and the errors itself so the no user would be created there so again we're inheriting from the base mutation class so that's this file here which is inheriting from the graph QL schema that's what I said I got from the docs so essentially that's the case of building the mutation now we need to actually build it onto this mutation type so that's actually not in our mutations folder so we'll need to create it or excuse me it's in our types folder so we'll say mutation type it's built already see there's a to do here it's just a test field for modifying that we'll remove that logic and since we created that create user mutation we could say the same thing here and mutation is mutations create user so here's we're naming that field and then passing in the mutation itself from the mutation folder is it just kind of knows to look in there and then find this create user class the naming conventions matter here so camelcase turns into this snake case and that kind of just follows true down the path of creating more mutations later so in theory this should work at this point if we go back to our browser we can kind of just get rid of this query for now just run play of course there's a server error because nothing's coming back just do that nothing will show a mutations gonna look at this you're gonna preface it with the mutation it's gonna be a open bracket and here's we're gonna perform that create user method and pass in the input object within that are gonna be our arguments we named so I'll say Andy leverets email is any at what crunch to string come then outside of that we need an open bracket to return the user that comes back so in this case it would be me I'll return the idea of my new user name email and then after this bracket we could return the errors object within this other object up here so essentially we're gonna return these two objects errors will be an array if there are any though so if we go ahead and run this scheme E's not configured for mutations looks like I'm missing something here next error somewhere create user I have a syntax error so let's go back to create user I think I have something here that's not quite right let's double check resolve user equals you new name name email email ah why I put brackets there I'm not sure we don't need them save that down go back to here refresh still got that run that through this again airs schema is not configured for me too you think that's what's wrong Gus so I have class this should be mutations hi mutation I also didn't have a comic here though got our query built here we're creating that user for the mutation returning an object that has the user and then the errors are if there are any so here my users at this point I don't have any posts so it wouldn't return anything so if I say posts it would just return nothing as far as I'm aware need to return something in that object so we could say whose actually it's gonna be post count but let's see if this works ya know post so nothing there but that returned as we wanted so that's essentially it guys so the concept here is that we have our graph QL folder we've got mutations to form manipulations on the data we've got our types to query for the data notice we're inheriting into our schema or using these different types to perform these types queries on the front end so I've got a query type to do users we can return all users that's what I did in the very beginning if you've recall it's gonna just say we could just do an open clothes and just return users we believe this should work field must have selected users we need something about the user so ID title title name email post count should return quite a handful users with that stuff so as you can see it all happens just with one query no no crazy routing or controller logic to hook up which is kind of a way to build those queries in the types file here and just go ahead and manipulate them at will so that's essentially it like I said I think coming up I'm gonna do the front-end exploration of this and just kind of hydrate data on the views and use something different that I haven't really used before with maybe react or Apollo like I'm pretty new to both of those languages and I haven't been a react person very much in my past more of a view UI but we'll see what happens so like I said pretty much learn on this channel so it's a public way to go ahead and learn that stuff so hopefully you enjoy so look for that part to come up soon if you haven't checked out my other stuff with rails and stuff like that there's a ton on this channel so I've ie to check it out as always thanks for watching and for now on peace hello rails is my new course on Ruby on Rails I'll teach you Ruby on Rails from the ground up visit hello rails that IO for more information you you

Channel: Web-Crunch

Views: 16,318

Keywords: graphql, ruby on rails, ruby graphql, graphql rails, how to use graphql with ruby on rails, How to use GraphQL with Ruby on Rails, ruby, rails 2019, rails 2020, ruby on rails 2020, learn ruby on rails, web crunch, web development, web development framework, learn to code, coding tutorials, ruby on rails tutorial, learn rails 2019, learn graphql, graphql types, graphql mutations, graphql ruby

Id: kSlJH3hrV58

Length: 36min 34sec (2194 seconds)

Published: Wed Nov 13 2019