4.3 Creating a Data Provider Component

In the past two lessons we've looked at two completely different topics. First we looked at scoped slots, then we looked at rendering components without a template. And those are interesting enough on their own. However, if we combine them together. Then we have something even more interesting. It's a whole new class of components. At least I think so. And I'd like to think of them as utility components. Things that don't really render anything but they provide some kind of utility. Like for example, in just about every application, we do HTTP stuff. We make requests, we work with the data that comes back from the server and all that wonderful stuff. And you will get different answers depending upon who you ask as to where and how you put all of your HTTP code. I would like to present to you something slightly different, in that we have a component for doing all of that. So let's say that we have http, we would have a url property that would retrieve whatever it is that we want. So we're going to create a file called guitars.json, and then inside of this we would use that data. So we have our list component up here. And let's say that we would use that list component to display the list of guitars coming back. Let's come and out login so that that doesn't confuse us, or me rather. And so, what we would then do, is have slot scope on our list, which is going to be the data from our http. So we would have a property called data. So we would pass data.guitars to the list and then all of our existing code would work. So that's what it would look like. Wouldn't that be cool? I think so. I think that, that would be freaking awesome. So what we are going to do then is take our guitar data, and we're going to use that to create a Json file. So inside of our public folder, let's create a new file. We'll call it guitars.json. And we'll paste that in and of course, we need to make this an actual JSON file. So we need to make all of our properties strings. And then of course, we need to change the single quotes on our string values to double quotes. And that should give us a perfectly valid JSON file. Looks good to me. We'll see here if it actually works. And so now let's just create that HTTP component. So instead of our source folder let's create a new file, we'll call it Http.vue. And in this component, we are not going to have a template. Instead, we're going to have a script. And you can use whatever you want for making your HTTP request. I'm going to use axios. So I'm going to import that. And let's go ahead and define our url prop. Now if this was going to be a true HTTP components, I would think that we would need, a method property to determine if it's a get post, put, delete, things like that. And there might be some other things that we need as far as the props are concerned. Let's just run with a get request because that's fairly straightforward. And then we need to decide where to perform our GET request. And I would think that it would be the created hook because we would want to make the request as soon as possible. So we would make that request, then we would work with the response. And so we would assign the data coming back to a property. Let's call it response because we can't really call it data. And that will give us our data to work with. So, let's of course create that response property. So let's add that and let's initialize it as just an empty object. And that gives us everything to start with. Now we just have to somehow get the response data to the parent through the slot scope. And we would do that with the render method. Now in the previous lesson, you learned that we need to return a VNODE, and we used the CreateElement function to create our VNODE for us. Well, we don't have that in this case because we aren't going to be creating elements. I mean, yeah, we could get it but, there's no reason for us to do that because we're not going to create elements. Instead, we have something that is going to be perfect for us. So if you'll remember whenever we talked about conditionally showing the slots in our modal components, we use this $slots property. And then we used, title and footer in order to determine if we had those actual slots. Well, we have something very similar. It's called scopedslots. And since we are using the default slot, we can use the default. And this is actually a function. And not only that, it returns a VNODE. So this is how we're going to create our VNODE. And it accepts an object and this object is the object for our slot scope. So just like in our list component where we said, this item property and this index property. And these became the properties on the object that we accessed through our slot scope. While we are literally doing that here we are passing in the object that is going to have our data. So we're going to have a data property and we will set that to our response. There we go. Now of course we would want some more useful things. And it doesn't have to be a property either. We could have some kind of method if we wanted to as well. And that would be really really cool. But we're just going to stick with the data that we have there. So now, this should actually work. I mean we have a data property for our slot scope that is coming from our HTTP component. We are using that data in order to get the guitars and that's being done by the list. So everything should work if we import everything and well, that's already working. That's because we have the data hard coded. So [LAUGH] let's comment that out so that we know that everything is not working right now, we can see that. So we want to import http from that new http.vue file. We of course need to register this, and this would be the moment of truth. Let's hard refresh. And voila, we have our data. Now, to prove that this is actually coming from the server, let us look at the network. I guess this really isn't proof. But this is going to show us that we are making requests for guitars.json, there it is right there. And if we wanted to we could change that data. So I guess that would be the best way to prove it. And instead of Les Paul, let's change that to Explorer. And over on the right hand side of the screen, we see Explorer, Vela and Starla. So, this opens the door wide open for just about anything. Anything that could be considered utility and it would actually make sense to do so as a component. Which in this case, I think that this is perfect. Then the combination of scoped slots and what is essentially a renderless control is pretty awesome and useful.