GraphQL w/ Laravel & Vue - Overview - Part 1

what's up guys Andre here and today I'd like to show you how you can use graph QL with laravel and view I feel like there isn't too much information out there when it comes to using graph QL with laravel and view so I figured I'd make a few videos about it and share my findings along the way so if you're not familiar with graph QL it is an open source data query and manipulation language for AP is it's been growing in popularity over the last few years and is said to be the replacement for REST API s I personally think it's great and addresses the issues with REST API s so in this first video we'll take a look at some examples of graph QL just so you can get more familiar with it and see its advantages over rest we'll take a look at some of the packages you'll be using for level and in view so for laravel we'll be making use of this lighthouse PHP package and for view will be using view Apollo so this is a part where I usually show you the finished product so you can see what will be building in the next few videos but I'm not done it yet as I'm just sharing my process along the way I am done that the design part so I'll show you that and just talk you through what it's supposed to do so a very simple app as we're just trying to learn graph QL it's a book recommendation site built with graph QL and all these technologies we just talked about so basically you can just perform crud operations on books and we have one basic relationship where a category has many books and a book belongs to one category and we'll also have an option to add a book update a book and delete a book so I'll click on this it should go to this other screen and here we can view the link for it from aperture set edit and delete so there's no concept of users in this app because that kind of just adds complexity obviously you need users for most web apps but I just wanted to get you to understand the basics of graph QL so we'll be leaving users out of this demo so yeah I just want to give props to where I got this idea from so if you go to eight books calm I saw this on producthunt a few weeks ago and it is basically where I got the idea from even the design I basically just ripped and even the book covers but I figured it'd be a good app to build so we can learn how to use graph QL so yeah props to the person who built this site it's also a great site with many books I've actually read so check it out if you're interested in some book recommendations ok so I want to start with a quick overview of some of the problems that graph QL solves over rest and for that I'm going to be looking at the github API because github has a traditional REST API and it also has a graph QL API so if you go to this URL you'll have access to the graph QL API if you click on Explorer and you do sign in with github and here's where we can play around with graph QL and I also have my rest client open and we'll play around with the rest API here ok so here's one of the end points for the github REST API and it's just information about myself so if you go here here's some information about myself so with rest it's all or nothing if you only need one or two of these fields you can't do that with rest because you'll have to return everything when you make the call to the API I have seen some API is where you can do something like fields equals and you just specify the fields here that you want returned but there is no common specification across all api's and if you're going to look at a new API they might have that and it might not so with graph QL you can specify exactly what you want returned so let me just read waste these comments and right here you can anyways these and you can specify whatever you want returned so if I want my login is the username and name is my name and there you go we get exactly we want and none of the extra stuff we don't need so this is a graph QL query which will be doing all of our work on graph QL in and if you notice the query structure is the same as the result that comes back except the result has actual data and I think that's a more intuitive way then hitting multiple endpoints and requesting data that way so that's another thing with graph QL there's only one end point usually it's a post request 2 / graphic UL but you can change that if you like but in general that's the end point with rest there is multiple endpoints and sometimes there can be confusion over which endpoint it should be when you're making a new API what's restful what's not restful with graph QL there's no arguments because it's just one endpoint and this expressive query language here okay so another problem with rest is sometimes the information you need is not in this endpoint but another endpoint so say for example I was making in app that had to get the github info so I'd hit this endpoint because I need information about myself but then I want to show my followers and there is an endpoint here for followers so right here I hit this you'll see my followers here so that means we have to make to Ajax requests which is not exactly ideal and it's not the end of the world but you can see that that can start to add up if you need information across the different endpoints in graph QL since we have access to this expression query language we can just specify that we want to show followers in this one request so again there's also this nice intellisense here so followers and you can specify parameters here I just want the last 10 and don't worry too much about edges and nodes has to do with pagination I believe and I want the information for my last followers I want also their login and their name might hit that there we go we have all the information requested here in this nice format and we can display this as necessary in our front end of our application so yeah just a high-level overview of some of the advantages of graph QL over traditional rest and now we can take a look at some of the specific implementations and we'll start with a laravel okay so like I said earlier we'll be making use of this lighthouse package which is a graph QL server for laravel it's an excellent package which has excellent documentation and works really nicely so if we go into the docs and if you go into tutorial there is a tutorial here which shows you how to get graph QL up and running with a typical blog so there's also a github repo which will just make use of here instead of building it from scratch so let me just clone this real quick so let me just go here get clone and it's open that up house tutorial oops lighthouse tutorial and then I open that in vs code so you can go through the tutorial if you want from scratch but let me just show you the essentials here so like I said it is an implementation of a blog so it's important to know the models we have here so we have users posts and comments and it's also important to know the relationships between them so users has many posts and a post belongs to a user also a post has many comments and a comment belongs to a post so let's go ahead and add some data in here and play around with graph QL so there is no environment file so let me just quickly copy one and let me just change my database so I think I have my called lighthouse tutorial set up already root root and I think just factory setup here yeah so this Factory is for each of the models here and in post factory so yeah when I did this this should actually be a sentence not a title and it's receivers here no there's no Cedars so let's just see if we can migrate first oh sorry I have to composer install alright that's page B artisan migrate okay so let's quickly whip up some seed data here using factories so I'm gonna start with users user and let's make ten create and let's make say 20 posts and it's make 20 comments oops so I just made another 20 users I meant to make our posts sorry post and it's make 20 comments okay don't know why that first time didn't work let's see if all our data is in here so I think this is the right database so let's check our users a whole bunch of users posts a whole bunch of posts and a whole bunch of comments okay so now we have data so let's go ahead and play with graph QL so back into the docs so if you're installation if you want that graphical tool that I was showing you and I was playing with the github API you have to install this package and you don't have to but if you want that tool in the browser then you have to install it there are also desktop applications which I prefer let me just show you this one first and then I'll show you the desktop versions that I prefer so let's install that and if we go into chrome let's see if that works so it's lighthouse tutorial dot test and I believe it's slash graph QL or it could be graph QL playground let's see okay so it's graph QL - playground to access the tool so there you go just make that bigger so now we can play around with graph QL and you can see that there's really errors here because I don't think there is a query specified for a user so yeah let's take a look at the schema here which is where you're gonna be spending most of your time so it's under things on the routes graph QL schema that graph QL so in here you have to specify all your types also the relationships so this is exactly like it's specified in the database the user and all the types the exclamation mark means it's required and here is the relationship so a user has many posts and it's using a directive here which this package makes a lot of use of directives so saying for the post we specify the relationship the other way or not the other way the relationship oh here's the other way between users and posts but here's relationship between posts and comments and the same here and here is where the queries live so if you want to make a new query we have to define it in here again there's heavy use of directives which you should learn it looks weird at first but it's actually really powerful and allows you to write less code but if you don't like directives then you can just use custom resolvers and just query eloquent the old-fashioned way which I will show you as well so yeah back into here so this is a red squiggly because there is no query for user there's only posts and post so if I change this to post then this should return there is no name for post it's a title if you want autocomplete I think you can press the control and control space but that is bound to Alfred for me but shift space works for me and you can bring up at the autocomplete and you can hit this play button or you can press command enter and there you go it brings back that one post that we asked for with ID of one again you can do everything that you like in here specify more fields if you want the content there you go so let's look at the post for a second we can also get the user it belongs to and get those back so user and just specify what you want returned so we want the user name and we want the user email and this is the user that created this post and also if you want to get any comments for this post there should be comment so I think comments and we can just specify what we want so I think the replies what is it in comments could be empty let's see try bring the ID in here which ID is this oh you know why this post doesn't have any comments so that's why it's returning an empty array so let's I think maybe post of 20 maybe okay so 50 has comments and there you see it there cool so let's quickly make a query for users and it's just take what we already have here and it's just change it for users so this will just return all the users so this is the query this is the return type so graph QL is typed that's what allows you to have that nice autocomplete and be nice intellisense which is great so again this is a directive and there are a lot of directives for this package which you should get to know right here and this is for the one user you want to pass in an integer that's required and we want to make sure where we return just one user here this is an array of users so it can be one or more this is just one so we're gonna find the user with an ID of whatever it's passed in here so sending with a post but for users and now this should work in our schema let me just write another one here so query user ID of one and let's just grab the name I believe so we have to refresh it first so one knows about it okay and now we should get autocomplete sorry this should be a user array not a user's array refresh and the error is gone and there you go so so far we've just been looking at query operations which are just read operations but there's also a mutation type which has to do with any writing of data so an update a delete or a create so let's quickly go over that it's gonna paste in some code again when you build out that the real app will start from scratch this is just a demo so you have an understanding of how it works with laravel and this package so we specify a mutation and let me just fix this okay so these are the parameters takes in the name which is a string and it's required and here are some validation rules again this package makes heavy use of directives which does look weird at first but you'll get used to it and if you don't like it again you can use custom resolvers which i'll show you in a second so email again it's required and a password which it will hash using bcrypt and then it will return a user a little return that created user so let's try this out so let me just comment this out and instead of query it's gonna be a mutation so let's do that mutation the autocomplete is really really nice really helps even if you don't know graph QL you just play around able to help you so create user after refresh so there you go create user and it's gonna give the parameters that we need named Andre what's next email Andre at Andre calm password is password and then it's just specified what we want back we just want the say the ID and the name and if you do that there we go ID of 91 go into our database if i refresh and over here sorry should be users so there we go I saw it yeah right there cool so yeah let me show you custom resolvers if you don't want to use directives or if you can't do something with just directives and you need something more powerful or need complete control then you can just use custom directive so I'll show you in here so let's just name it latest post again it can be anything it can be a really complex query which you just want to use eloquent with and you just have to specify the name and the return type and in this case it's gonna return a post just one and then it's going to the docs and I think there's a guide for types no I thought I just feels I think there we go customers all verse so here's the example I'm about to do but you can just make use of this artisan command so whatever you name the customers already just make sure you make a class with a capital L in this case so paste that in bears in lighthouse it's a query you can do custom resolvers for mutations as well so latest post let's go to that latest post and you can also have parameters here and then you can access the parameter from within the class but in our case we don't have a parameter so in here if we did have a parameter we'll just specify it like like this so we just get it ARC's and then if the name of the prominent was that you just do that but we don't have one so and in here you can do whatever you like and you just have to make sure that you return whatever you said you would return here so in our case we have to return a post so just one post so I'm just gonna do return post and this is called last again you can do complex query or whatever you like in here just make sure you return the right thing and that's it so if we go back in here let me just comment this out and miss refresher actually let's take this out and I think I named it latest post yeah so just latest post so - should we turn the post and just grab the title a post not found be sure to import it report it here okay let's try again there you go there's the latest post but now we're using a custom resolver if you need that extra power so yeah that's just of it you'll be doing most of your work in this schema graph QL you can also split this up if you like into multiple files if it starts to get bigger and yeah so that's basically it for laravel oh yeah so I personally like to have this tool as a desktop app and there are desktop apps for both graphical and graph QL playground so this one is graphical playground and the other one that we used when we were doing the github API is called graphical so just search for them graphical desktop and you can download them I believe there are electron apps and graph QL playground desktop you can search for them I have both of them installed already so let me just show you quickly so let me show you graphical forced so just paste this URL in and you can do the same thing so let me describe this they start in let's try it and it works cool and the ones called crafty old playground and let me just grab the URL again the URL and for some reason it knows I guess it took the information from here and there you go it works I personally like this this is more like your text editor so you can do things like command D you can move it up and down you know multiple cursors so I prefer this over graphical but you can use whatever you like I prefer it again as a desktop app because you know we tend to have a million things running in our tabs so just organization purposes I like to use the desktop app okay so let's take a look at how to use graph QL on the front end so up till now we've just been playing around on the back end and using these tools to to interact with graph QL so how do we consume it from the front end we need to use a graph QL client and in this case we're gonna use view Apollo which is very nice and easy to use so let's go ahead and get started and let's install it so I already have a view CLI 3 application scaffold it out and I literally did not do anything to it I just did we create and that's it and it's running right here so the installation is very straightforward if you're using vcli 3 you can also do it the manual way but this way is much quicker and easier so I'm just gonna do a few at Apollo oops let me go into it first and view ad Apollo so it's asking if you want example code I'm gonna say no we don't need a server because we already have one okay so there are the files that have changed and it's installed so let's go ahead and go into actually know this is laravel let's go into our view app and I'm just gonna play around here in hello world somebody's clothes of stuff so what I want is I want to make a data property down here and I want this populated with stuff from the backend so return say users let's make it an empty array and it's also make one for just user let's make that no okay so how do we get the information from our back-end graph QL into here so obviously you could make use of these queries so let me just bring one up I'll just get something very basic users and it's grab a name and their email and sure why this isn't working let me refresh okay here we go so we just want this information in our front end so if we go into the talks for queries so obviously we'd have to make use of this query somehow so the way to do that is to import this graph QL gql thing so let me import that up here and we have this new Apollo property and so let's put that right underneath here and here is where you would specify so we want to populate users with this query so we'd use gql and then we use template strings to put the query in there so in our case we just want this so you can put query but you don't have to so I'm gonna leave it out for now just so it's a bit shorter users so it's basically this basically that this query right here so we see what name an email name and email and yeah let's give that a try what is this complaining about I'm sorry there should be a method okay so let's see if this works so this should populate when the component loads so let's see if that works I'm gonna open this see if you have any errors first and check review dev tools let's go into our hello world app and let's check our users its undefined so it's not working so yeah obviously it's not working because we didn't specify the end point so if you go into this file view apologies within the source directory we can specify the end point here so I was trying to hit this end point obviously that's not the correct end point so it's what is it again it's lighthouse tutorial that test / graphic UL okay so that should do it save that and see if this works there it is loading and as you can see we're getting Coors errors here so let's quickly fix that so we have to install laravel course on the backend and specify a middleware for the lighthouse package let me just install this real quick in the backend and while that's going usually you would install omit the the package using middleware here in app HTTP kernel but in our case we want to put it in the config of a lighthouse so let's go and do that so go back to our back-end and I believe it's in config lighthouse there it is and I think there's a section for middleware yeah so it goes right here under this route config sorry let me just uncomment this and then we can add that package right here cool and now this should be done obviously okay and this should work now on the front end okay no more cores errors let's check our you can fake viewed up to what I mean and there you go 91 users so this corresponds to our database there should be 91 users in here and there is cool and you will display this as you please in your front-end I'm not gonna do that okay so let me quickly do a mutation and then I think that should give you a good idea of how graphical works in our back-end and our front-end so let me just make a button here quickly in the world component up here just put it right here but in sorry say click equals handle click say mutation test mutation let's make a methods for handle click so I'm gonna predict it right after Apollo methods handle click so if you look at the docs there's a section here for mutations right here so I'm just gonna copy and paste some videos getting quite long so you would just make use of this Apollo mutate and then put in the graph QL for the mutation so let's go ahead and do that real quick and uh based on this in so this Apollo mutate and the mutation I'm doing is this so I'm creating a user and it's hard coding some data in here and this corresponds to the create user mutation that we have here and that should work so let me just do that and then let's see if this works okay so that should have reloaded I'm missing a comma somewhere I think I'm missing a closing bracket here okay let's try it again yeah I was missing another closing brace there okay so there it is so let's test this mutation there's gonna be no feedback let's just see if that added like it did so it's just refresh this and there you go cool so there you have it guys I hope this video covered the basics of using graph QL in both feedback and laravel using lighthouse PHP and on the front end using view and view Apollo also I hope you're more familiar with the tools available such as graphical playground graph QL and all of this graph QL goodness as I said earlier in the next few videos we'll actually build out an app from scratch so we can see a full and practical example of graph QL in action please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 46,355

Keywords: laravel graphql, graphql laravel, laravel graphql tutorial, laravel graphql lighthouse, laravel lighthouse, lighthouse php, graphql php, php graphql, laravel graphql example, laravel graphql rest, vue graphql, graphql vue, vue apollo, apollo vue, vue graphql tutorial, vue graphql example, laravel vue graphql, vue laravel graphql, vue apollo tutorial, vue apollo client, graphql laravel example, laravel api graphql, laravel api, laravel lighthouse tutorial

Id: hvjW-MQEwIM

Length: 37min 13sec (2233 seconds)

Published: Wed Jan 02 2019