Build an App With GraphQL, Laravel, and Vue

3.2 Creating and Querying Our API

In the previous lesson, we created our first GraphQL type, it represents our project. And now we need to be able to query our projects. And so we will do that by creating a query. So lets go to the GraphQL folder inside of app. Let's create a new folder called Queries. So we have one to contain our types, we also have one to contain our queries. And we will create a new file inside of Queries and we will call this file ProjectsQuery.php. And then, well let's just open up our ProjectType file. Let's copy and paste this into ProjectsQuery because it gives us a lot of what we need. Instead of the Types namespace, we're going to change that to Queries. We do need our project model, we need GraphQL, we need the type. But instead of using this type as GraphQLType, we're going to change this to simply Query. And then we will change our class name. This will be ProjectsQuery, which extends Query. We have our attributes, we still have a name and description. So the name is going to be The projects query. And as far as the description is concerned, it Retrieves projects. I don't know what else we would put there as the description, but that's going to be just. It's fine, we don't need to specify our model here. And we, off course, don't need to specify fields because that is specific to our types. So instead what we're going to do is define the type that is returned by this query. So this is going to be a function called type. And we return the type of a list of projects, because that is essentially what we are going to be returning here. So we're going to use this type, which has a method called listOf. So this is how we are going to specify that this is a list of all of our ProjectTypes that we have created. So to refer to that ProjectType, we use GraphQL. And then this has a method called type that we pass in the name of the type. Now, the type that we pass in has to match the type that we specified inside of our GraphQL config. So whenever we set up our project type, this name is what we have to refer to in order to get the type of our GraphQLtype. So we are returning a list of projects, and then we need to write a function that it's going to actually do the work as far as getting the data that's being requested. So this is a function called resolve. There are two arguments. One's called $root. The other is called $args. And we will talk about those at a later time. For right now all we are going to do is return all of our projects. So we're going to use our project model and call the all method that's going to give us all of our projects. Now eventually, what we will want to do is specify a particular ID to retrieve an individual project and we will get to that at some point. But for right now, we're just going to stick with this. But just because we've created a query, doesn't mean that our application knows that this query exists. We have to go to the GraphQL config and we have to set that up here. So we're going to call this projects and then we specify where this query is. So that is App\GraphQL\Queries\ProjectsQuery..class. Now, the name here is very important because this is how we refer to the query that we want to use from our client code. So if we go back and look at our little pseudocode/query, you can see that we are requesting projects. Well that is by design because I wanted the name of that query to be projects. However if we are going to actually perform this query, which we are going to be doing, what we need to do is this, we need to specify that we are making a query. Then we can give this query a particular name, like fetchProjects. And then we would have curly braces. And then we would have our query. So it would look something like this. And so inside of our client code, it's going to look something very similar to this. However, for the sake of simplicity, we are going to do simply this. We're gonna have a pair of curly braces. We're going to say that we want to make a request for our projects, and then we will specify the information that we need, like id and title. And we can take this, right here, and we could use that in the browser. So let's fire up our browser. Which for me it's gonna be Chrome. You can use whatever you want. And we are going to make a request for local host at 8000. Now be sure that your application is up and running. I did that before we started recording, I just did php artisan serve, and that's going to work just fine. So here we have the welcome screen. If we make a request for GraphQL, and then we specify a query URL parameter and then what I just typed. we have {projects{id,title}}. That's going to execute that project's query that we just defined. And we can see right there, we have our data. So the schema of this, we are getting back a JSON structure. It has an object that has a property called data, which itself is an object. It has a property called projects which matches the name of the query that we executed. And then we can see that it is an array of projects, which we only have one. So of course, all we are seeing is one here. But if we wanted to request other information like the description, so let's do that. We have the description, we can make a request for that. And we will see that the data that comes back includes the description as well. And of course, if we had multiple projects we would be seeing those here as well. Now one very important thing to note, if we remove this opening and closing curly brace, we are going to get an error and it's not going to be a PHP error. It's going to be a GraphQL error. You can see that the syntax error that there's an unexpected name, projects. And this falls back to what I originally said that the query needs to be. A formal query is going to start with the term query followed by a name for that query. And then that would contain the actual query. So by just passing in projects and then id and title, it's thinking that projects is the name of the query that we are passing in. Not necessarily the name of the query that needs to execute on the server. So if you choose to take this shortened version you do need to be sure to wrap your query with curly braces. So we now have a working query, to where we can retrieve at least a little bit of information about our projects. In the next lesson, we're going to start working on the UI, which will start with a dashboard that will display our projects.