So just go to this endpoint, log in with your GitHub, and you can make queries with your account. So the default one just shows your login, so just hit play or command enter, and it will run this query. So with GraphQL, we only have one endpoint, and that's usually a POST request to /graphql, but it can be any endpoint. The main thing here is that there's only one endpoint, whereas with REST, we have several endpoints for the different information that we need. Say we wanted information about our public repos, so with the REST API, you'd have to find the endpoint for that and how to pass in data and maybe any parameters that you

Say we wanted information about our public repos, so with the REST API, you'd have to find the endpoint for that and how to pass in data and maybe any parameters that you need. But with GraphQL, once you understand the syntax, you can sort of just guess, and most of the time you'll get the correct information. So viewer is the logged in user, and GraphQL is typed, so it has a really good autocomplete feature. Just press Control + Enter or Shift + Enter in my case, and you'll see all the fields available to you. Or alternatively, you can just go to the documentation here, which is generated automatically because

But in this case, just think of edges and nodes as the different fields to a collection or an array. So in this case, we want edges, and the node will contain the fields for one repository. So again, make use of the autocomplete here, and let's grab the repo URL, and maybe there's a name as well. Again, use the autocomplete, and you'll see the different fields available to you. So now when we run this, command enter, we get an error, but the error messages are very descriptive. You'll see it says, you must provide a first or last value, so it knows how many fields to return.

So you can see we have this query, which corresponds to this object here, we have the viewer. And the only thing that's different is the edges and the nodes. As you can see, edges here is an array, but it's an object here. Okay, so that's great. What if we wanted more information? So say for example, I wanted to show my GitHub avatar. So that's probably within viewer, again, make use of the autocomplete. There it is, avatarURL. And now we get that information back and we can display it on our client side. What if we wanted my bio?

And now we get that information back and we can display it on our client side. What if we wanted my bio? Again, there's bio there. And now that information is within this data object here, right here. What if we wanted my followers? Again, make use of the autocomplete followers. This is a collection, so it will have edges and nodes as well, edges, node, and the node contains information about one specific follower. So maybe a name, hit that, again, we have this error, which says we need first or last on followers.

Is it in here? No autocomplete, maybe it's in here. And it looks like there is a config object here. And you can see it's a config input type. And again, if you don't know what type exactly it should be, just look at the documentation. So getCityByName, we have this config input. So if we scroll down, you can go here, and you can see it's an object with units and language. So let's try that out. It's an object with units.

Cool. So again, what if we wanted information about another city? So just go ahead and make another query here. So let's duplicate this. And let's change the city name to somewhere in the Philippines here, so Manila. So let's try that out. So we get this error, and it says we need an alias. So remember how I said the structure you get in the response is similar to this. So as you can see, we have duplicate key names here. So these two are the same key names.

So let's grab some movie information. Let's see popular movies. Again, we have edges and nodes. The node will contain the information about one movie. So let's say title. There it is. And maybe there's a release date. Say release. There we go. Cool.

There's one for Star Wars and so on. And most of the time, they're just wrappers around the traditional REST API. So knowledge of that would be helpful as well. Now let's take a look at the example we'll be building out throughout the series. It is a blog application. Yes, I know blogs have been done several times, but the reason for that is because they are extremely effective when you're learning a new topic. So you have all the CRUD functionality. So you can read posts. I have pagination here as well.

So you can read Posts. I have pagination here as well. You can create Posts. So let's create a new Post. I apologize for not styling the app. This is the content. So let's create that Post. Okay, there it is. We can update the Post if we created that Post. So for this one I just created, we have this update Post option.

We can update the Post if we created that Post. So for this one I just created, we have this updatePost option. Let's say updated, updatePost. So that worked. But if we try to update another Post, that should not work because we did not create it. It looks like I created this one as well. Let's try a different one here. Looks like I created all of these. Let's just go to a different one here.

Looks like I created all of these. Let's just go to a different one here. Okay, so you can see there's no update post link here because I did not create that one. We also have this myInfo, which pulls data about the currently authenticated user. I also have this admin route, which shows more authorization and only admin or only people that have the admin flag set can access this route. And obviously we have authentication as well. So if I log out, we have, well, we can still read the post for logged out, but we also have login and register if we want to authenticate as existing users. So as you can see, this is a Vue application and we're making use of the popular Vue Apollo.

have login and register if we want to authenticate as existing users. So as you can see, this is a Vue application and we're making use of the popular Vue Apollo library to make use of GraphQL and communicate with the backend. So just a quick example here. Let's go to the home route. You can see this Apollo query here, and here is the GraphQL query to grab all the posts. So again, the front end is in Vue making use of Vue Apollo. And for the backend, we are making use of the popular Lighthouse package, which is a framework for serving GraphQL from within Laravel. So the idea here is we have this schema file, which defines all of our types in our system.

framework for serving GraphQL from within Laravel. So the Idea here is we have this schema file, which defines all of our types in our system. So in this case, it will be our models. And it also exposes the queries available and the mutations available. So let's take a look at our schema file here in our backend. Here it is. So here are our queries. And here are our mutations. You can see we can create, update, and delete posts. And here are our types.

You can see we can create, update, and delete Posts. And here are our types. We have a User and a Post. So this package makes heavy use of directives, which map to certain functionality within Laravel. For example, for grabbing all the Posts up here, we are making use of the all directive, which corresponds to, oh sorry, for Posts. Actually we're paginating it. But the all directive maps to User::all() in Eloquent. We also have directives for things like pagination, authorization.

But the all directive maps to User all in Eloquent. We also have directives for things like pagination, authorization. So we have this all directive here. We have validation here. We have some authorization using policies here. And we'll go through everything throughout the course of this series. So let's just quickly see how we can query this information within GraphQL Playground. So like I said, the endpoint is typically /graphql. And in this case, it is for our backend. And let's take a look at something simple.

And in this case, it is for our backend. And let's take a look at something simple. Let's just grab all the posts here. So let's remove this. Let's make a new query here, query is implied, actually. You don't have to type that, but I like being explicit. Again, make use of the autocomplete here. So let's grab posts. And in this case, we don't need edges and nodes.

So let's grab posts. And in this case, we don't need edges and nodes. So we can grab the data. And then let's grab the title and the body. And we're making use of pagination here. So I believe we can say something like first two results. Or we can give a specific page here. So yeah, lots to cover here about GraphQL on both the front end and the backend. So if you found any of this interesting, I hope to see you within the series.