Okay, let's start building out our application. So we'll start on the server side, so we have our own information that we can query. And we'll make use of this Lighthouse package. Before we do that, let's just set up our application. So I have a blank Laravel app here. And remember, GraphQL is a replacement for REST APIs. Or you can use them together as well. So essentially, we're just replacing the routes/api.php file. So everything else stays the same. So your database, your models, your relationships.

So everything else stays the same. So your database, your models, your relationships. So let's set that up for our blog application. So let's say php artisan make:model Post, and let's just make everything. Okay, so let's start with our table. So create posts table. So the relationship is going to be Post belongs to a User. So let's start with that. Let's say table for an id, it's going to be a user_id, okay? And let's say constraints, so it references the users table, okay?

Let's say table for an id, it's going to be a user_id, okay? And let's say constraints, so it references the users table, okay? And for now, let's just add a title and a body, so table, string, title. And we'll make one for body as well. And we'll make that text, okay? I think I want to eventually add a slug, but this is okay to start, okay? Let's go ahead and set up our relationships. So let's start with users. So a User has many Posts. So let's add that here.

So a User has many Posts. So let's add that here. Posts return, this has many Post class, okay? And let's do it the other way around as well. So a Post belongs to a User. So let's add that down here. Let's also add an empty array here. And let's add that relationship. And let's say User here, or you can say author as well. I'll stick to User here.

And let's say user here, or you can say author as well. I'll stick to user here. Return this belongs to User class, okay? Let's also set up a PostFactory. So we have some seed data to work with. So let's say for the userId, let's just create a new User every time we create a new Post. So we can say userFactory, okay? Let's make sure to import User. And let's add some stuff for our title. Let's just make use of faker here.

And let's add some stuff for our title. Let's just make use of faker here. So this faker, let's say let's give it, sorry, I meant a method, let's give it fourWords. And let's say true. So it's a string. And let's make sure that the first character is uppercase. So we can say ucfirst, all of this, okay? And let's add a body as well. We'll do sentences instead of words, fourSentences is fine.

We'll do sentences instead of words, sentences. And four sentences is fine. And let's also add different created_at times, because we want to sort by created_at. So we can say this faker, date, timeBetween. And let's say anything between now and 30 days ago. And that will be randomly generated. Okay. Now let's go into our seeder and make sure we're using that. So DatabaseSeeder. And let's say PostFactory create down here, PostFactory.

So database seeder. And let's say PostFactory create down here, PostFactory. Let's create 50 posts. And that's going to create 50 users as well. And that should be fine for now. Let's make sure to import Post. And hopefully I did everything correctly. Let's go ahead and php artisan migrate --fresh --seed. I have an alias for that and everything seems to be okay. Let's check our database to make sure.

I have an alias for that and everything seems to be okay. Let's check our database to make sure. Let me just refresh this. There is our posts. We have 50 of them and we have 50 users as well. Okay, cool. Okay. Now that everything is set up, let's go ahead and install Lighthouse here. So let's go to the get started. Let's go to installation and go ahead and composer require in.

So let's go to the get started. Let's go to installation and go ahead and composer require in. So let's go ahead and paste it into our application here. Okay. Let's publish the default schema using this command. Okay. And you can see it's within this file here, which we'll take a look at. And I think that's it. Actually, we also want to install GraphQL dev tools so we can query our information using GraphQL playground.

Actually we also want to install GraphQL dev tools so we can query our information using GraphQL playground. So let's grab that. You can also, let's just wait for this to install. So as you can see, we can now go to /graphql playground to have that nice interface. So let's go ahead and do that. So our project is lcarevelgraphql.test and we can go to /graphql playground to access that GraphQL playground so we can make queries. Okay, cool. So if you want, you can also make use of desktop applications.

Okay, cool. So if you want, you can also make use of desktop applications. So the two popular ones are GraphQL Playground and another one is called Graphical. So just Google those if you prefer desktop applications. So again, GraphQL Playground, just Google GraphQL Playground Electron or Graphical Electron. I'm just going to stick to the one in the browser here, pretty much the same thing. You just have to make sure to point it to the endpoint and this package defaults to /graphql as the endpoint. I think there's also a config file that we can publish. So if we check the config here, we can publish that.

I think there's also a config file that we can publish. So if we check the config here, we can publish that. And I believe that has the option to change the endpoint if you want to do that. So let's check that out, config lighthouse. And there's the endpoint right there if you want to change it. Okay, now let's check out the schema file that it generated. I believe it's in app/GraphQL right here, GraphQL/schema.graphql. First you're going to want syntax highlighting. So make sure you have the proper plugin for that or the proper extension. So I just search for GraphQL.

So make sure you have the proper plugin for that or the proper extension. So I just search for GraphQL. And the one I'm using is this one right here. And it seems to work well with VS Code and syntax highlighting. So once you have that in place, you can see the default schema here. So these two definitions make it easier to work with dates and date times. So I recommend that you just leave that in there. And you can see that we have some default queries here and a default type of our User. So again, with GraphQL, we are replacing our routes/api.php file. And pretty much everything you do in GraphQL will be defined in this schema file.

So again, with GraphQL, we are replacing our routes api file. And pretty much everything you do in GraphQL will be defined in this schema file. So what we need to do is define our types. And we do have this default User type here. Let's go ahead and add our Post here as well. So let's just duplicate this. This is of type Post. So it's just corresponding to the models in our app. Our Post has a title. And it has a body.

Our Post has a title. And it has a body. And we'll leave the timestamps as well. And these are specific types that these fields expect. So in this case, the title and the body are strings. The ID is an ID type. And the exclamation point means that they are required. So they can't be null. So again, this is just our model. These fields are generally what you have on your database columns.

So again, this is just our model. These fields are generally what you have on your database columns. But they can be other things as well, like accessors or methods, which we'll take a look at later. And you can also define relationships in here as well. So when working with this package, you'll be making heavy use of directives, which you can see here in the API reference. And you'll see a very large list of them here. And what they do is pretty much map Laravel functionality to whatever directive you choose here.

And what they do is pretty much map Laravel functionality to whatever directive you choose here. So for example, for the all directive, this maps to Eloquent's all method. So you can grab all of the models. Now if there's a directive that doesn't exist, you can always make your own, which we'll take a look at later as well. So like I said, we have relationships on our Users and our Posts. So let's go ahead and add that to our types here. So for our Post, our Post belongs to a User. So let's go ahead and add that field here.

So for our Post, our Post belongs to a User. So let's go ahead and add that field here. So we have a User. So what type does the User expect, it expects a User type, and it can't be null as well. So let's add the exclamation point. And to define the relationship, again, we have a directive we can make use of. And in this case, it's belongsTo. So let's add that Post belongs to a User. And we can do the same for the other relationship. So a User has many Posts.

And we can do the same for the other relationship. So a User has many Posts. So we can add that here. So the relationship is posts, or we want to be able to grab the posts from a User. What type does it expect, it expects an array of Posts. So we can say that. And we also have to make sure that each entry in the array is not null, and the array itself is not null. It can be empty, but it can't be null. So we add the exclamation point as well.

It can be empty, but it can't be null. So we add the exclamation point as well! And again, there is a directive for the hasMany relationship, hasMany, there it is. So let's go ahead and add that here. And there's an example down here, pretty much the same application that we have here, or at least to start. But now we have to add a query for posts, so we can query our posts here. So the default comes with users. And you can see it's paginating the users here. And this definition is for finding a specific User.

And you can see it's paginating the users here. And this definition is for finding a specific User. So you can see that it comes with a parameter here. Okay, so let's try out these default ones first in GraphQL Playground. And it's pretty straightforward. Again, make use of the autocomplete here. So we'll say query. And right now we have user and users, which is what you see here. So let's try users first. Okay, again, make use of the autocomplete.

So let's try users first. Okay, again, make use of the autocomplete. And since it's being paginated, we can either get information about the Paginator, or we can grab the actual information for each User. So let's try that first. Again, autocomplete. And here are the fields for the users, as defined in our type here, right here. So let's say we just want name and email, sorry, email. And let's run that. And now you can see that information here.

And let's run that. And now you can see that information here. So again, if you want their posts, we have access to that information because we added the relationship here. So as you see in the autocomplete, or we don't see an autocomplete because we have to refresh the page here. And hopefully now it shows it. And it doesn't. And that's because I didn't save my schema file. So let's save that.

And that's because I didn't save my schema file. So let's save that. Again, let's refresh this page so I can pick up on changes. And now hopefully posts shows up. And it does. Cool. So now we can grab information about the user's posts. So let's just say title. Cool. And for the single user, again, it's making use of the @media directive.

Cool. And for the single User, again, it's making use of the Eloquent where directive. And this is just so Eloquent can find one specific User. So it's making use of this where directive as well as the find directive. And you have to pass in an id. So let's get rid of this. Let's find one specific User. And again, autocomplete is nice here. id expects a type of id. And now we should have information about this User.

ID expects a type of ID. And now we should have information about this User. So there we go. Name, email. And we can grab the posts as well if we want. Post title. And there should only be one because of the way we defined our Seeder. There we go. Cool. Now let's just make sure this is correct.

Cool. Now let's just make sure this is correct. So I'm going to manually add one more Post for User ID 1. So let's just do that here in the posts table directly in the database. So let's just add one here. The user_id is 1. New title. New body. Now. Now.

Now. Now. Okay. Let's try that again in our GraphQL playground. And now we have two. Cool. Let's add the ID in here to make sure. And that's correct. Okay. Now let's add queries for our post type.

Okay. Now let's add queries for our Post type. So it's pretty much the same as this. So let's start with posts. So a list of posts. So let's say posts here. It's an array of posts and each one is required and the array itself cannot be null. And instead of pagination, let's just use the all directive, at least for now, just to see it working. And for a single Post, it's pretty much the same as this.

to see it working. And for a single Post, it's pretty much the same as this. So it's post. This is fine. It expects a post type and that should be good. So let's try that again. Let's get rid of this. Let's grab the posts here. Actually they save it. We have to refresh.

Actually they save it. We have to refresh. So picks up on the changes. Post there we go. And let's say id, title, and body. Okay. And this returns all 50 of our posts because we're just using the all directive. So again, if you want to paginate, we'll just use this directive here. And I forgot to show you the pagination info. So I'll show you that now.

And I forgot to show you the pagination info. So I'll show you that now. So let's paginate that. Now this won't work anymore because we have to grab the data key. So if we try this, you'll see that we get an error. So we have to use the data key like I just showed you earlier with users and we can do the same thing. id, title, body. Okay. But like I said, we also have pagination info here.

Okay. But like I said, we also have pagination info here. There you go. We have the count. So that should be 50 or sorry, that's the count for the current page. What else do we have here? The total count is down here called total. That should be 50 or 51 because I added that one and so on and so forth. And later on, we'll build out the actual pagination on the front end using Vue. So you can see that we have these fields like currentPage or hasMorePages and you can

And later on, we'll build out the actual pagination on the front end using view. So you can see that we have these fields like currentPage or hasMorePages and you can change the page here in the posts. So say page two and we should get posts 11 to 20. There we go. There's 11. Since we're building a blog, I do want to sort by the latest posts. So let's go ahead and do that. So let me just put this back to page one. Actually, let's get rid of this.

So let me just put this back to page one. Actually, let's get rid of this. Okay. And you can see it's just sorting by ID for now. Let's grab the orderBy directive. So let's search for that orderBy there it is. And we can make use of it like this. So as you see, we have a column argument and a direction argument. So let's try that out. So we can still paginate it.

So let's try that out. So we can still paginate it. So we can leave that. But it's also add orderBy the column is going to be createdAt and the direction is going to be descending. Okay, save that. And let's try that out. So now hopefully 51 should be here because that's the latest one. And it is correct. Cool.

And it is correct. Cool. So let's double check. So let's return created_at here. As you can see, it's created_at this date. So the next one should be before. And it is cool. So yeah, that's an overview of how to make use of the Lighthouse package within Nerval. Again, most of your work is going to be done here in the schema file, as opposed to the routes/api file, if you're building a traditional REST API.

Again, most of your work is going to be done here in the schema file, as opposed to the routes/api file, if you're building a traditional REST API. So again, we define our models here. We also define all the fields on them as well as their relationships. So in our case, we have Users and Posts. And then we add any queries that we want to make use of. So in this case, we added queries for finding all Posts or finding a single Post. We're also eventually going to add mutations so we can write to our data. And then after you do that, you can verify that they work correctly in GraphQL playground. And then eventually on our front end, in our case in Vue, we are going to make use of

And then after you do that, you can verify that they work correctly in GraphQL playground. And then eventually on our front end, in our case in view, we are going to make use of these queries here and then display them on the page. In the next video, we'll take a look at using mutations so we can write to our data. So as always, I'll try to make commits for each episode here. So I already have one for the Lighthouse installation. Let's add one for this. So let's say initial Lighthouse GraphQL setup for posts or for blog.