Let's take a look at an alternate way we can query our data using Apollo Components. So the idea is to use this ApolloQuery component, and pass it in a query as a prop, and then within the default slot, we pass in the template. And when we do it this way, there is no need for anything in the script. So let's see how we can do this. So first we have to install Vue Apollo Components. So let's do this. Let me stop my server. Actually, it stopped already. Let's go ahead and do this.

Actually it stopped already. Let's go ahead and do this. Okay. And we already have this ApolloClient. We already have the provider. And we just have to make sure to use the VueApollo components. So we have to import this in our main.js. So back to our main.js. Let's import this up here. Okay.

Let's import this up here. Okay. And we have to use it in our app. So app.use VueApolloComponents. So let me just put it after this. .use VueApolloComponents. Okay. So now we should be able to use this syntax here. So let's take a look here. Let's grab this.

So let's take a look here. Let's grab this. And we'll do the same thing in our home. And just grab the list of posts. So let's put another section in here. So this is for what we had before. Let's put another one in here. Let's say Apollo Query Component. And let's paste that in. Okay.

And let's paste that in. Okay. Let me save that. Let's update our query here. So let's say query. We're grabbing all the posts. Actually it's the same as what we have done here. So let's just grab that. Okay. Let's paste that in here.

Okay. Let's paste that in here. Okay. we don't need variables in this case. We don't need the body. And we just need to pass in a template to the default slot here. So let's take a look at the example here. And you can see we're using scope slots here to grab the loading state or the error state or the actual data if it's successful. And then we're going through those different cases.

or the actual data if it's successful. And then we're going through those different cases. So if it's loading, show this. If there's an error, show this. If there's an actual result, show this. And if there's no results, show this. So let's go ahead and grab this. Let's paste it in our default slot here. Let's save that. And our data should be data.posts, I believe.

Let's save that. And our data should be data.posts, I believe. And let's just see if we get anything here. Back to our app. Back to the home route. And I believe I'm not running my server. Sorry. npm run serve. Let me just refresh this. Okay.

Let me just refresh this. Okay. So there is the results. And we need one more key for data. So it's posts or data posts data. Or if you want to clean this up a bit, you can destructure it here. But this is fine for now. Let's see if we get our array of posts. And it looks like we do. So just like before, we can just loop over this and render it here.

And it looks like we do. So just like before, we can just loop over this and render it here. So we can basically just copy what we had up here. Let's copy the unordered list here. Let's paste it in our template for the results. We don't need this v-else. So it's data.posts.data. And everything else should be the same. So let's save that. And it looks the same.

This is just a simple explanation with no code.

Let me just wrap this up in a div. And then we'll have another one here. Okay. Let's paste in that h2. And let's grab the query from here, or the Apollo query. Let's paste that in. Let's go ahead and grab the query here. So it's the same thing. Let's paste it in here. Okay.

Let's paste it in here. Okay. So let me save that. And to pass in variables, it's similar to what we did before. So we can say variables. And we can just pass it an object here. So in this case, we need the id. And the id is route.params.id. And I forgot my quotes here. And now let's just update the result case.

And I forgot my quotes here. And now let's just update the result case. So here, let's get rid of this. So we can just say data.post.title. And data.post.body. Okay. Did I do that correctly? And it looks like I did. So here's our new Apollo query component where everything is done in the template and doesn't require anything to be in the script.

section. But if you want to do it this way, that's totally fine as well. So that's it for queries for now. In the next video, we'll take a look at using mutations within Vue Apollo. So as always, let's make a commit here. Add git commit. Let's say Vue Apollo query components.