- Overview
- Transcript
6.2 Getting a List of Users
Nothing new here. We need to build a query and use it to retrieve all the users in the system.
1.Introduction
1.1Introduction01:31
2.First Steps
2.1Setting Up the Project05:29
2.2Designing and Migrating the Database10:06
2.3Setting Up the Models10:48
3.Building and Querying a GraphQL API
3.1Understanding GraphQL09:42
3.2Creating and Querying Our API08:17
4.Building the Client Application
4.1Assembling the UI07:17
4.2Querying the API With JavaScript11:26
4.3Adding Arguments to Your Queries11:28
4.4Organizing Our Client-Side Queries07:53
4.5Defining Other GraphQL Types08:53
4.6Displaying Our New Data09:44
5.Incorporating Authentication
5.1Building the Login View09:42
5.2The Login Mutation11:37
5.3Authenticating the API09:17
5.4Incorporating Authentication on the Client Side09:04
5.5Displaying Auth-Appropriate Menus07:59
5.6User Registration09:33
6.Working With Complex Data
6.1Building the Project Creation UI08:31
6.2Getting a List of Users03:54
6.3Defining Input Types12:33
6.4Saving the Project09:52
7.Conclusion
7.1Conclusion01:00
6.2 Getting a List of Users
In the previous lesson, we set up the UI for creating a project. But we need our list of users so that we can appropriately select the users to assign tasks to. So, we need to write the query that is going to handle that request. And really there's nothing special about this, we have done this several times. It's just that we need to do it now, so we're going to do it now. And let's take our projects query and use that as a basis, because that's at least going to get us up and running. Let's call it UsersQuery and then we will, of course, make the necessary changes. So the class name is one. We don't need auth, we don't need the project model, either. We just need the user model. And as far as the attributes are concerned, let's call that UsersQuery. This retrieves users and there are no args, because we are just simply retrieving all of our users. So we will get rid of that. Now our return type is not going to be a list of projects, it's going to be a list of users. And the resolve method will be much more simple, we simply just return User::all();. So, that should be fine. We need to go to our config and register that, so let's open up the graphql config. Now, this is a protected endpoint, or not an endpoint, this is a protected query. So let's put this in the default schema and let's just call this users. And of course, the query name, the class is UsersQuery. So we are done with the server, now let's focus on the clients. So let's go to resources > js > components, and that was inside of views > CreateProject.vue. And let's do this inside of the created hook, so let's do that there. And we will make a request using our query method and let's call this users. Whenever we get a response, we are simply going to set our users = res.data.data.users; and there we go. So now we just need to define the query inside of our queries. And do we have something? No, let's just write this. We're gonna call it users: and just like everything else, we'll use the formal syntax, so we'll have GetUser. We have no variables because we have no arguments, but we do need to select some data. Now as far as our user interface is concerned, all we really need is the ID and the name. We don't need the email address. So let's just get those. And that should work, I would think. So let's refresh the page. Hopefully, we will see our list of users and we do. Now let's make sure that everything else is going to work. So if we select Jeremy and Jim on the assigned to dropdown box, there should be Jeremy and Jim. If we just select Jeremy, we have Jeremy. If we add several tasks, we should see the same thing regardless of what task it is. So, everything is working fine as far as our user interface is concerned. So, now we just need to focus on retrieving this information and sending it to the server. And we will do that in the next lesson.
