Exploring GraphQL

- [Instructor] Before we get going with GraphQL, let's talk about what it is and how you can use it with GitHub. GraphQL is an open source query language for managing data on your server. You can take a look at their website right here which gives you a lot of information and it shows you that you start off by describing some data, asking for what you want and then you get predictable results in return. But this doesn't really show the full power of what it can do. What makes it unique is that it lets you retrieve everything you need from your database in a single call. You get a lot of information quicker than with traditional REST APIs and in less requests to the server, which makes it faster. Like react GraphQL was created by Facebook. It has been running their mobile apps since 2012 which in web years is a really long time. Just imagine how efficient and fast it has to be to run all of the data from Facebook. Now, it's been an open source project that runs under its own foundation since 2018. And it's also used by GitHub and other companies so you know that it's battle tested. GitHub's version of GraphQL allows you to look up the information about your account and repositories. It's a great place to get some practical experience with GraphQL. The way that you start with GraphQL and GitHub is by using something called the GraphQL Explorer. You can get through it right here. That GraphQL Explorer requires that you are assigned into your account. So go ahead and sign in after you go to this link. What's your log then? This lets you play around with your real life production data from GitHub as if you are in an application that's already authenticated. The Explorer also has a lot of built in documentation and you can see right here that we have these different tabs as well as this docs right here which is where you get the documentation. To begin with, you get a sample query and all you have to do is click on this button right here to play that query. So you can see on the right that the data you receive is in the JSON format. Now the graph QL requests, syntax it's something that is close to JSON or JavaScript object notation. And you can see that it has the curly braces just like JSON, but it doesn't have name and valley pairs. It's really designed to just describe the query, in other words, what you are asking for. So here we're starting by getting the username of the current user, which for me, it's planet of the web. So we execute a query command right here and that query has a viewer option. And that also has a login option right here. Now the nice thing about this GraphQL API Explorer is that it also lets you see all the documentation. So the documentation and the Explorer are in the same place. And notice that when I roll over these different sort of definitions here, it's going to give me some documentation info and I can come in here and click on any one of these items to get the documentation on the right to show what that is all about. So, if I see this, I can go ahead and look at what each of these items are. So you see the users are defined with all these different parameters right here and it has really good descriptions of everything that you see right there. So, let's go ahead and close this out. There's also a few buttons at the very top. So you can start typing in your query here and if you hit this Prettify button, it's just going to reformat it to make it look nice and even got rid of the comments as you see right there. Notice that there are some triangles right here so you can sort of collapse the data. So if you have a really long query you can use this to make it look a little bit simpler. You can also click right here to go to the history of all the queries that you've made. We haven't done that many yet, but you can see them all in a list right here and you can even start them or edit them by clicking on this button to give them labels. Now, in addition to that, you also have the Explorer which shows you a different view of the documentation. And this essentially gives you sort of an outline of everything you can do in GraphQL. Sometimes looking at the documentation is a little bit complicated. So if I go to the documentation you're going to notice that I can do either a query or a view mutation and I can click through here, and then there's like a long list of all the different properties here. This is sort of just a simpler way of looking through the documentation and seeing sort of all of the different things in a simpler way, just a little bit quicker. So you can take a look at, say the user sort of search that we can do here and open that up and take a look at all the parameters for each one of those. And we can click on these to add them to our queries. And notice that when I clicked on Company HTML, it automatically added that in here. So now if I put in here, say planetoftheweb, I do have a company set up in my profile. So that's what it's showing me right here. And if I wanted to see my bio, I could click on that. And so this is kind of not just a way to get to the docs, but also a nice way of adding things into this section right here. So if I play this, it's going to show you the bio and you can look at the HTML version of the bio and just keep on adding things by using the Explorer, it can be pretty handy. Somehow my query got deleted, I'm just going to Undo to show my query again. There's also an interesting way that you can look at what's available in each one of these sections. So if I hit return right here and I type in any letter, I should get a pop-up menu that shows me all of the options underneath that letter or close to that letter at least. I can also hit the Ctrl + Space Bar anywhere here and I can see the full list of things that I can add here. So let's see, let's add the number of followers. If you add something and you get this red sort of underline, it means that you can't just ask for this thing, you have to sort of give it a few other parameters. And in here this followers would be a list of all my followers. So that requires a more complex query and it's telling you here the format that you should have syntax saying that you should probably add a set of curly braces here and then in addition to that now even though we've done what it said it needed, it's saying that it probably wants you to include some more information right here, more inquiries later. But I just wanted to show you that it's really well-documented. There's a section down here where you can test out query variables. We're not going to use this very much because we will just be doing things directly in react. But if you want it to try out sort of how you would use variables in your react application, you can do it right here. So before you to get going too far make sure you go into the GraphQL Explorer, sometimes this is pronounced as graphical instead of GraphicQL. It is a version of something called graphical which is the traditional way that you would make queries in a GUI or graphical user interface. That's a separate application that you can download or you can go online and actually play with it on the web. The only difference between the traditional graphical and this Explorer is that this allows you to quickly sign into your account. If you're using the regular graphical you would have to actually submit some login information. We'll go over how to set that up or how to set up your authentication which you'll also need for your react app later on. So it makes sure you go to this graphical interface and explore what you can do with the GitHub GraphQL, it's as easy as going from the original query and trying some of the things out in the left-hand and receiving some data on the right.