LEARN GRAPHQL WITH VUE APOLLO IN 20 MINUTES!

so yesterday I was looking at view Jas and I was looking at all the trends all the cool stuff that's coming to view and what I kept on hearing and what people kept on telling me is look at graph QL you need to look at graph QL see how it integrates in with view there's something called Apollo how a view Apollo works so I got to thinking and I thought maybe that would be a good video to make today because I know a lot of people are interested in it so today this video is all about view Apollo how to use the components in it how to put it all together so make sure you watch all the weight and stay to the end and find out all about it [Music] hey and if you don't know my name is Eric I'm a full-stack soft developer I'm also the author of the view Jas in action book and really the purpose of this channel is to make you a better professional developer so you can make those big bucks and get the job of your dreams so without further ado let's go ahead and jump into the code okay I went ahead and created a brand new view project here so if you're if you are interested in how to do that you just make sure you install view and then after you do that you do view create and then the name of the project so I went ahead and did that and so here is the directories here and you can see here both public here's my source and just like the normal I have this normal hello world which is the normal hello world view and so if we go ahead and start this we'll go just to make sure it works we'll go npm run serve and that will go ahead and start our development server okay so if you go ahead and go to our localhost 8080 so here is our development server and it seems to be working as we expected now what we want to do is we want to get to something like this now this guy looks kind of messy I know but what we're gonna do is we're going to do a few things we're going to be able to list some stuff from the graph QL server and then we're also going to use grab a mutation and see how that works for example doing an email and password and grabbing back an access token so what I'm gonna do first is I'm going to use faker QL this is actually a website where you can just play around with craft ql you can create queries you can create mutations and things like that so like for example I wanted to do a query you can see here I have a bunch of examples let's say I want to do all users and then from there I wanted to grab I don't know the ID and the first name and if I hit play here it'll go ahead and grab all the information over here on the right hand side we could also do mutations and everything like that so this is the server we're gonna use now we're going to use view Apollo is going to be the library we're going to use inside of our app to connect to the database and to do queries so let's first set that up so if you go to the installation it tells you right here you just need to view a DePalo so we'll go ahead and do that let's stop the server and then do view ad Apollo ok I ran the view ad Apollo command and that's gonna ask me a few questions here so let me go ahead and move myself so you guys can see it's asking me to want to add example code I'm gonna go ahead and say yes so that way that'll help us and graph QL server we're not gonna use it since we're gonna use the fakir ql1 and so it'll go ahead and install everything we need and then I'll show you what it did there all right so we went ahead and installed everything if you can look up here this is all the files that it been updated or added so it added some new stuff to my package JSON installed it it added this Apollo example file it added these gql and fragment files which I'll show you guys in a second and then added a little bit of updates to our router about in-home and then this view Apollo file so let's take a look if we look in here our File Explorer in the left-hand side I have now this graph 2l folder and I have all these different gql files you can see here this is just the graph to L queries so I'm gonna go ahead and just delete all these because I don't wanna use them them all to the recycling bin and then it also adds this apollo example file which is actually pretty helpful but we don't really need it either so delete it okay so we deleted those we can see here this hasn't made this apollo provider it wouldn't added this line into our main j/s file it also made an update to this file right here but I don't think I don't think I see any changes right now so it looks very similar to what it was but here is the configuration file for Apollo has a bunch of stuff we probably don't need so the first thing I want to do is the WS endpoint we can go ahead and just delete this and make it no I'm going to make this null and you can see right up here this is this process environment so or if we don't have environmental mental variable set up it's gonna go ahead and use this so we'll go ahead and delete this here and we'll go ahead and paste in our URL which I'm gonna grab for my other screen here of the one we're gonna use so it's good price in it okay so we got our fakir QL graph QL endpoint setup inside this file we went ahead and set the did WebSockets endpoint to know I mean we could go through here and delete a few other things but just for now we're gonna leave it just the same and by the way I'll leave a link to this repo in the description so you guys can take a look at it if you want to jump in so let's go ahead and just run it see if I didn't break anything I'm gonna run serve it and see if it starts correctly and if we look at it here close that one run this and yep we're still running we don't see any error so that's good if we go to the console yep looks okay so the next thing we need to do now is see if we can create some queries so I'm going to create a couple of files here and we'll probably do is we want to grab all the - dues so we essentially what we want to do is we want to do this command this one we did all instead of all users let's do all - dues and then out of there we can I don't know grab a title and and ID it kind of looks like this and then this will bring all to do so and so let's see if we can create that first and also let's see if we can add a limit to how many are returned so we have this count right here so we can do like count five and we can just return five of them or if we just want to do count one you just return one so let's see how we set that up inside our view JSF using Apollo so I'm going to create the query I'm going to do a new file and I'm going to call it all deduce gql and I'm going to now type it in here so one second so what I have right here is my all to dues here it's going to bring in if you know if you're not familiar with graph QL queries or not I would go to graph QL website has some really great documentation on it but essentially we're doing this new query called all - dues where our variables name is count it's integer we're passing that into the query as count and it's we were expecting it to turn a title and ID so that's as simple as it gets now in this hello world I'm just going to delete everything here so we don't need any of this and we'll just have what's opening and closing hello and if once again we take a look at our view yep nothing there that's fine if I want I can also go into the app dot view or is it in the main let's see here and I'm trying to remove the views here in the home I'm gonna remove this logo so now we don't have the logo we just have the home and about at the top it's perfect so in the hello world now what we can do so the first thing I want to show you is the way we add in the Apollo using the object inside the export default so believe it this is default here so what we do is we create an Apollo and this Apollo object will actually hold where our queries are so we have to actually import in the graph QL query language is here so you use this gql from then graph QL tag and now I can use this GQ l right in our query here so I just want to make sure I get this right so we're gonna call all - dues and we're going to GK QL and then this little back tick here and this is where we're gonna have our query so we'll do a query okay inside this query we're Newall - dues and then we're gonna pass in the title and ID and then we're gonna make sure that at the end of this that we with closing our gql and so what this will do is it'll make sure that our all to dues is ran and it'll run this query now keep in mind I actually kept this name the same as this name if you don't then you might get an error I actually ran into that when I was trying this out but having the same name it works well okay so let's see if we can just go ahead and make sure we can talk to our graph too well so we'll get back to the gql file later but you know I can do a div here and I'll can do a b4 and I'll do to do in all - dues and then we'll have to have a key and that that'll equal that to do that ID that we had before and just make sure it works we can do to do title and let's see if that works so if we look here you see here now we have all the titles of all the different - dues that it created so we know it works I'll make this a little bigger so it's definitely talking to a server that's really cool let's say we wanted to do something a little different and actually in our all - dues do a some sort of variable to limit the amount of things that come back so I could just do count equals here and then put in just a literal here like 5 all right you see here we have 5 here so let's take a look to see how we do this using the gql file so I'm going to just take this this template here I'm going to comment it out just for now and now I'm going to for the sake of time I'm gonna go ahead and just copy and paste what what a way we can do this using an Apollo query instead so one second okay so what I'm doing here is I'm doing an Apollo query and of course we're gonna have to have closing Apollo query although query after this and what this is doing is and we'll have to have a closing bracket too and what this is saying is that we're gonna do a query we're gonna do this gql and we're gonna do the G quote gql query and we're going to do the Alta Deuce and we're get to title an ID so it's essentially the same thing as this but instead of writing the query inside this Apollo object now we're writing it inside the Apollo query here so if we refresh it one thing we actually have to do is when we use Apollo queries I don't want to forget this is we create a template which once again I'm going to copy and paste and inside this template basically we have a slot in it and the slot give us gives us three things gives us a result which has a loading and air in a data state so we can actually check for different states that it's in and then display different messages the easiest way to do that is we can do like B if here and then in V if we'll just include loading data or air just just for what we're doing now and save time I'm just going to show you the V if for data and then at this point we can do sort of the same thing we did here so if I paste this here and I get rid of the comments now we have option of all the informations actually in the data so it would be data dot Alta dues and then it would just wrap through the data to grab all the information so if we save that and we look at it so here it is again now we can see no errors and here's all the information for everything that's in the graph QL database so that's another way to do it now the third way to do it is instead of using embedding this query right into this Apollo so beta Sencha Lee this Apollo query is a special component that you get in with view Apollo that you can then start writing queries right inside your templates but let's say you didn't want to write to write the query like this so what you could do and just for the sake of argument I'm going to comment that out I'm going to create a new Apollo query query which I'm going to make an opening closing tag for and this time I'm going to just same query but it's gonna equal the gql file so once again I'm just gonna copy and paste this from another screen to save us a little bit time because you don't want to hear me type so this is what this is saying is we're gonna do a query but this time I'm going to grab it from the Alta dues gql file which remember is this one right here and we're going to use that in there instead now this time if you notice the altitudes gql file it actually has this count so we can pass variables to it so to do that we this is all part of the the component so we can write here we can add something called variables and then the variable is equal and then you put these parentheses and then count which I can then pass in from our data object so let me see here I get let me add a count here I don't know of two so now we have we're grabbing the L to do zql file and we're passing the variables account over to it so let's see if that worked cool so you can see we only have two there if we change this to four and then save it now we have four and so you can see this could be dynamic and you can just change it right inside but I can make an input and have it well let's see if we can do that so if I do an input and I put a V model equals count and i refresh this you can see it says for I put two actually gave me an error because I got deleted let me try this again 41 oh you know one thing I have to do because it's giving me an air is because it's coming over as a string so what you can do is I feel it I believe it's V bottle dot number and that'll make sure it's a number refresh this yeah so now I can do three four five six so this could be dynamically grabbing stuff from our graph QL database and displaying it which is really cool so I'll just comment that out so that's so that's the way you do Apollo queries essentially is you just put the colon query you can do the require here you can add the variables you can write it in the gql file you can write it in line inside here or you can grab it from this Apollo right here on this Apollo object so let's take a look at mutations and the way you do mutations and once again I'm going to copy and paste my other screen here is so this is an Apollo mutation so we have we have a mutation we're actually gonna create a new file called registered RQL so right in my graph QL file I'm gonna do new file and call it register gql and you can obviously name this whatever you want and then inside this I'm gonna have a new mutation so this is what looks like so I have this register mutation it takes an email and a password and I'm passing it to this register and it's returning a token so I could actually run this on our playground so if I do mutation here and I call I don't know register and then I'm going to have well just for the sake of it I'll just do register like this we know has an email which is I know blah blah calm and then it's also has a password which in this case let me make this a little bit bigger so you can see is you know whatever you want it and then it's gonna return back the token and here it is so here's the token this so this is essentially the query we're doing we're creating a new mutation which means it's creating it something new on the server it's an email password and I want it to return a token afterwards so if we go back here we now created our register gaol file we'll save it now in the hello world we're we're saying let's grab the register gql file we're gonna use our variables email and password and then undone this is like a callback that we'll get something will happen so we want to create a new undone method so I'm going to create a new methods and create on done and just to make sure it works I'll be alert worked so that's in there getting an error because I don't have a closing tag here so I'll have to create a closing Apolo mutation now just like the other one where we did the the template we do the same thing with a template but I'll copy and paste one over to you for you and now I'll close this so if we go into this next page here or excuse me this next screen so so what we're doing here in between the opening closing bracket opening closing open mutation I'm creating a new template and now have V slot mutate so if you look in the official documentation and you go to Apollo mutation you can see you have mutate loading an error so once again you can have different V ifs if you get an error or if you get a mutation mutate is actually like a command that actually triggers it so what I did is I could add a new form and then I said on when the form is submitted it would trigger this mutate and the stop prevent means it's gonna prevent the default and then I have this email and then I have this password I have v-model email v-model password and then the button at the bottom is to click to mutate and it's a so let's see if that works and just for the heck of it we can also see if we get back the alert so if we go back to here so now we have this email and password so I can put in my random email pass or at gmail.com password and if I hit submit I did get an error that my property or Meza passer is not to find an instance oh so what I need to do is in my account here I'm going to add in email and password I'm gonna save it and now I'm gonna clear the mornings and see if it works here's my other email by the way cool so I get my callback it worked I get my alert to show something this has worked so now I could probably even do something like this I can create token which just equals nothing and then inside instead of doing on the undone it actually this has a value that gets returned so I could do this token equals Val and see what happens there I do my email oops let me wait for this to load there we go and hit submit it didn't do anything because it is adding it to the token but we didn't display the token which we can go ahead and do right here okay let me try it again cool so here's this big actually return this data a dot register token so I can even if I wanted to I can go back and do valid data register token and then same thing here cool and here's the big token that it came back with so that's a lot to go over with I win it pretty quickly but essentially what I did is I created this mutation it grabbed information from the register gql file right here where i'm passing an email and password in a mutation is something that makes a change to the server so this would actually send it to the server and make the update I created this template which is which has this V slot mutate which is the way we trigger on a click to actually trigger it to do something and it passes in email and password into it because that is set up as the variables on this mutation so that's essentially how it works so I think that's a lot to go over we could definitely deep dive into this a little bit more there's there's more things you can do with this Apollo right here I can actually add variables to it if I wanted to just like it did up here with the components but I think this is a good starting point if you guys want some more information on view Apollo please put a message a link in the message excuse me you put in a comment in the description below I'm actually a little bit under the weather today but I still had fun doing this so please make sure you like comment and subscribe appreciate it thanks

Channel: Program With Erik

Views: 34,459

Keywords: Vue Apollo, How to use Vue Apollo, Vue.js, Vue.js tutorial, Vue.js project tutorial, Vue.js Graphql tutorial, Graphql vue tutorial, Vue Apollo graphql tutorial, Vue apollo link state, How to use GraphQL, Graphql 2019, How to setup Vue.js with Vue apollo, Apollo graphql server, apollo graphql vue, apollo graphql react, Program With Erik, Program With Eric, Erik Hanchett, Vue.js help tutorial

Id: 8JtmnsolNq8

Length: 23min 38sec (1418 seconds)

Published: Fri May 17 2019