* This is an automated transcript. Please excuse inaccuracies.
Hey everyone, so today we have a very cool tutorial for you. In the past couple weeks, I've been speaking with a lot of developers and asking them, you know have they worked with Graph QL or are they familiar with Graph QL. I pretty much get the same answer every single time which is, “I have heard of it.” So, today what I thought would be really valuable is if we walk through an implementation of Graph QL on an existing REST API endpoint. Not only will it give you a complete understanding of what Graph QL is and why it's pretty incredible but it will also help you understand what 8base does and why we are a very useful tool when you're trying to build services that would you utilize a Graph QL API alright so let's jump into it and check it out okay.
So, to get started, let's just set the stage by saying that I created a very simple rails application that currently exposes a single end point; and that end point is at restaurant/ID. So, when we get a request at restaurant and pass in an ID it goes to our restaurant controller and hits the show action which you can see that it finds the restaurant and by ID and then just renders that as JSON right. So, if I were to open my browser and I were to go to restaurant, an ID of one- cool. It gave me that restaurant as JSON and two- awesome! Alright so right now this is a rest endpoint right I give it the idea that I want and then it shoots back all the information is exposing about that given restaurant.
So, let's go back to our application and look a little bit at what else we have here so if we look at our models, we can see that we have restaurant which has many dishes right. And I'm actually going to look at the schema to show a little bit more about what this has. So, we have a restaurant which has a name and a rating and then some other kind of metadata property. And then we also have dishes which has named a price description and every dish belongs to a restaurant. So, let's say that I was developing a component or an application that needed the restaurant which we know that we have access to, but then so wanted to see the restaurants dishes. Well, right now if I wanted to make that change, I could of course jump in and then here maybe make some type of custom object or use a serializer that then would render all that information out as JSON. But then that means that every single time that I get my response, it would be the exact same response right.
So, quickly let's build a component that will actually consume this restful endpoint- okay cool. So, very simply I created a little view component here that when we give it the idea or query the ID, it then goes hits our endpoint and brings us back the restaurant with the ID that we gave it. All right and so you can see it just gives us the ID, the name, the rating, when it was created and the time it was at last updated. And so, if we look at that component here, we can see that it's just a single view component, very simple and all its doing is listing out every single property on the restaurants object that we get returned, right. So, if I was a front-end developer and I was here and now I decided, “Oh well what I really need to are all the dishes that also belong to the restaurant.” What I have to do is either jump into my server-side application myself update the API. Maybe create a new endpoint that is restaurant dishes. Maybe there's an API that we expose for dishes and you can pass the restaurant ID to only get back those dishes regardless though what I'm trying to explain here is that it will definitely take changes on the server side to get the information I need. Then one other thing that will happen is that right here all we're saying is, “Hey, give me ID 3”, right and it's we're listing out all the information that is given back. But what if we only needed the name and the rating right, that means that our system is sending us more information than we actually need and we have no way of having that happen otherwise.
So, this is where we're going to now jump in and say well imagine if we could specify in our component here exactly the fields we want from our server. And then when we make that request it actually only returned the information that we're looking for right that's possible using Graph QL. So, now what we're going to do is jump back over to the Ruby on Rails application and mount a Graph QL endpoint and then update our component to consume it okay. So, the first thing we're going to do is add some important gems to our gem file right. So, first off what we're going to do is we're going to add the Graph QL gem and then we're going to add the graphical rails gem. This will give us the graphical interface which allows us to query our Graph QL API as well as expose our schema so we can kind of explore the endpoint that we're signing up- that'll make more sense in just a minute. So, I'm going to paste these into my gem file, shoot over to my terminal and run bundle install and cool those are installed. So, now we can jump back into our application.
So, it looks like I actually forgot to save my gem file so let's save it and now let's go back to the terminal and let's run bundle install one more time- cool now that's installed. So, what we're going to do really quickly now is use AR rails generate command to generate some new assets. So, rails generate Graph QL install. So, as you can see here it created a new directory inside our app a directory called Graph QL where it gave us a bunch of types; in something called mutations and controllers; a lot of stuff in there right. So, we can jump into in a minute, but what we're going to do is we're going to run bundle one more time and now we're going to generate some Graph QL objects right. So, remember we had a restaurant and dish those were the two types of models that we're using in our application. So, let's run rails, generate, Graph QL, object and we're going to do one for restaurant- cool. All right so it made a restaurant type for us and then we're also going to do one for dish and it made a dish type for us right.
So, now let's jump back in our application cool. So, we're back in our project and we can see here that a that new directory was created called Graph QL however what we're going to want to look at first is actually our routes file. So, we can see that we have this new route which is at slash post Graph QL and it runs to this Graph QL execute; the Graph QL controller that runs the execute method right. So, that's actually our single graph koala point and all graphical queries, mutations, even subscriptions if we were to set those up will actually run against that single endpoint. We're going to add one thing to this file though. Since we added that graphical gym, we have this graphical whale's engine right. And so, what we're going to do is we're going to mount it at the graphical path, so that then we can play with our Graph QL API. So, I'm going to throw that in here just mounting that engine save and then I'm going to jump in and restart our rail server.
So, I restart that cool and now let's jump back into our browser and go to the little host here- this is where our servers running and open up graphical. Loading one second- make sure that we're not getting any errors. Ooh we are getting an error. Let's see what what's happening too - no round match. No round match okay. So, we're getting no route match error for these assets ah okay here we go one second. So, if we actually jump in into our application dot RB file that is in our config directory cool and we open up sprockets- that's one of the requirements that we need to have here. So, let's restart our server one more time and boom all right. So, this is graphical right. So, if we were to say, “Hey, what queries can we do? We could say that we see, “Oh we have this test field” and if we execute that hello world- it gives us our first hello world query, right.
So, if we jump in here and actually open up the Graph QL a directory and we see the okay well there's the schema, there is mutations and queries. And then if we were to go into types, we can see these different types- query type being one of those.
Okay so let's go back to our query type and then we're going to delete this hello world test field that we just ran right and we're going to add something new in here. I'm going to paste in the new type that we're adding which is we're going to add a field to our query called “Restaurant” and it's going to be of our restaurant type which we created when we use the “generate object command” and passed it restaurant. It takes an argument which is an ID and that argument is required right so when you're calling this method you have to give it the idea of a restaurant. However, when that gets called this is the method that calls it right so we have our restaurant method and the ID of the restaurant. And what does it do? It reaches into our database and pulls out the restaurant with the given ID right.
So, right now if we saved that and we went back to our Graph QL API, well we're going to reload that and we can look at this and say, “Okay well now what's available ooh restaurant.” And if we want we can pass it an ID. Let's say 1 and right now we're going to get an error why because we haven't specified anything about the different properties on the restaurant type- it's empty. So, let's go back to our project, let's go to our restaurant type which is right here and let's start defining some of the fields that are on this restaurant cool. So, we are going to give it a field which is ID, this class type it's going to be ID and we will not allow this to be null. So, null false okay. Then what we're going to do is we're also going to say that a restaurant has a name that's going to be type string. And null we can say, null true- we allow null in this case, as well as a field which is rating which is going to be a float type and null true as well- if we don't make these required. Cool!
Alright, so now let's go back to our browser, reload graphical and now we can say, “Okay well, hey, we're going to choose to get back the ID and the name and boom that's exactly then now what we're getting.” So, we're already pulling the data out of our Graph QL endpoint right. And so, I wanted to I could drop name, give rating and everything's dynamic. But remember our concern was that now we need to have dishes right.
So, let's jump back and create that relationship via our graph URL API. So, the way that we're going to come to accomplish this is very similar to how we've been saying up these fields so far. We're going to say that we have a field and we're going to call it “dishes” and that is going to be an array of from our types we are going to use dish type; which we have are going to have to jump in and define here and then we're going to say that hey this relationship can be unspecified. So, now let's jump into dish type and let's just copy some of this to speed up the process. So, when we have our dishes right dishes have an ID ,they have which is a type ID, they have a name they also have a price which is a float and then they also have- Oh too much- they also have a description… description which is a string, alright- cool.
So, once again back to- Oh one second, I think I have to save this. Yep. Good there. Okay. So, now let's jump back to browser and let's look at this. So, I'm going to get rid of rating and I'm going to say that, “Hey, what I really want is the ID the name and now I want the dishes right” which I'm going to jump into. And on the dishes, I'm only going to want the name of the dish and the price of the dish and so now that's what our API is going to bring us back right- that's super cool. So, if we wanted two of course we could change the ID get a different restaurant different. But now let's actually jump in to our component that we built and now utilize this or consume this this endpoint or make this query.
So, back in our component we can see that our application or our component is still just making a normal get request to our restful endpoint and getting back the information it or the information on the restaurant based on its ID right. So, let's switch this over now to actually use our Graph QL endpoint. So, first off what we're going to do just to make things a little bit cleaner is, we're going to add a new method to this component which builds a Graph QL query. And so, we're going to say query and it's going to get passed an ID there we go. Let's make it a simple arrow function. And what we're going to do is create an object that has a single key called “query” and that is set to a property well which is a string… cool. And then we're going to pass that ID in as the query argument, right. So, there we go- cool.
Next what we're going to do is we're going to create a post request to our new Graph QL endpoint which sends this query. And I think one thing that's really important to note here is that, Graph QL is not like some new type of protocol for requesting or sending data across the web; it simply is a post request that sends the query as the post body and then the server interpretation sends you back the data that you want right- that's a super important distinction and is the reason why we can use a familiar library like Axios or any other normal way that you're used to making HTTP calls or HTTPS calls. So, let's just put that in there and say, “Graph QL” since that's our endpoint right. We actually don't need to make that string literal; we can just make it a normal string. And then for the post body we're going to say is, that this query since we have our query function and we're going to pass that the restaurant ID. So, let's just calm out our old restful approach. And in here, let's then say that okay well then once we do that all we're going to loop one second, then all we're going to do for now is console out the response. Console dot log- cool all right past that as a callback.
So, let's jump back to our component and we can see that its status loading and we argued in an object printed out. So, let's go jump in and sure enough that is the restaurant object with that ID that we requested. And we can see that we only have, the name the ID and dishes are actually coming back. So, let's see, we actually have to dig a little bit deep into that object to get the properties we want. So, let's jump back here and similar to how we said that the response sets the response data to this restaurant, let's jump in and say this and then it's data dot restaurant, right. So, now if we reload our component cool it's displaying all that information; so now we can see that we have the ID the name and the dishes.
Now what's so cool about this is remember we're in a component right here right we're on our front-end we're in our application so let's say that I didn't want the ID [I think that will work unless the null thing won't let us], but we also want the rating. So, I just changed my query. Now when I reload my component boom that and rating. Let's say that for the dishes I didn't want the price of the dishes, I only wanted the name, now when it displays, we only have the name of our dishes right.
So, this shows now the flexibility that I have as a front-end developer building you know components for only requesting the data I want, being able to work through relationships and requesting that data and then never having any type of blocking tasks from endpoint requirements slowing me down.
I really hope that this gave you a really great overview of what Graph QL is and how powerful it can be for data driven applications. We will try to do these tutorials for not only around Rails, but Python or Django, as well as Node and Express apps. So, looking forward to seeing you in future videos. Thank you.
We're excited about helping you achieve amazing results.
