which we don't need. And the goal here is to show our list of posts from the backend. So let's just put a placeholder for now. Let's just say list of posts. Now let's go ahead and install Vue Apollo. Let me stop this. And if you're using version 3, then installation is much easier. You just have to do one command. But for v4, we have to do everything manually. So let's go ahead and install these packages here.

But for v4, we have to do everything manually. So let's go ahead and install these packages here. Okay, next, we have to create an ApolloClient instance, like it says here. So we can grab all of this. And we can put it in our main.js. So let's go to main.js. And let's put it right here. So we have the import. This is our connection. So we have to change this to our GraphQL endpoint, which is this URL here.

This is our connection. So we have to change this to our GraphQL endpoint, which is this URL here. So let's change that. And here is where we create the Apollo client. And I think there's more steps here. The documentation for v4 is not as complete as it is for v3. So it's a bit harder to find things. So let's start off with the classic API. And it looks like we have to install one more package here. So let's do that.

And it looks like we have to install one more package here. So let's do that. The Apollo option. Okay. And these instructions we just did. But I believe there's one more thing that we have to do. There are two things. We have to create the provider. So we did this already. We created the client.

So we did this already. We created the client. We have to create the provider as well. So let's grab the import. Let's put that in here, or up here. And let's add the provider, or create the provider first. Let's put that underneath here. Okay. And now we have to use it like this. So we have to add the use and provide the ApolloProvider.

And now we have to use it like this. So we have to add the use and provide the ApolloProvider. So we can change this on anywhere here. So I'll put it here. use ApolloProvider. Okay. Save that. And hopefully Apollo should be installed correctly now. So let's see if we can make a query here. So let's go to usage in view components.

So let's see if we can make a query here. So let's go to usage in view components. And you can see we have this new Apollo key for our view instances. And this is where you would put your queries. So let's go here and see if we can do that. So here's an example of a simple query. Let's grab this. Again, we're going to do everything in home for now. Let's go ahead and add that Apollo key. And this is a query that will run.

Let's go ahead and add that Apollo key. And this is a query that will run. We also have to import GQL so we can make queries correctly to the back end. So let's import that. Okay. Let me save that. So when this component is mounted, Apollo is going to make a query here, and you can specify it within these back ticks here. And it's going to populate a variable or a piece of state named hello in this case. But in our case, we want posts.

And it's going to populate a variable or a piece of state named hello in this case. But in our case, we want posts. So we can change that. Let's go ahead and paste the actual query for grabbing all of our posts. So we should have that in GraphQL playground here. Okay, so let's grab all of this. Let's paste it in here. Okay, let me save that. And now hopefully, if I did that correctly, we should have a posts variable that has our posts.

And now hopefully, if I did that correctly, we should have a posts variable that has our posts. So back to our app. Let me open up DevTools here. Let's go to the view DevTools. Let's check out our home route. And I forgot to restart my server. So let's make sure we do that with npm run serve. Okay, server's up again. Let me refresh this.

Okay, servers up again. Let me refresh this. Let's check out our home route. And now if you look here, you'll see we have a posts variable that has the correct data for our posts. So there should be 10 posts here. And there they are. Cool. So again, just specify this Apollo query here, or Apollo key. And then we can specify a variable to hold the results of that query.

So again, just specify this Apollo query here, or Apollo key. And then we can specify a variable to hold the results of that query. We can use GQL to perform that query. And then we can just perform the actual GraphQL query in here. Okay, so now we can use it in the template like we're used to. So let's go ahead and do that. So up here, instead of our lists of posts, make one more div here. And then within here, I'll have an unordered list. So UL and LI. And here is where our v-for will be.

So UL and LI. And here is where our V4 will be. So V4, let's say posts or post in. So our posts are in a data key. So posts.data right here. So let's do posts.data. The key should be post.id. And for now, let's just output the title here. So post.title, okay. Now the posts variable is going to be null before the information comes back from the

So post.title, okay. Now the posts variable is going to be null before the information comes back from the server. If there's data first. So let's just say v-if posts, okay. Let's try that out. And there is our information. Now if you want a loading state, we can do that as well. So we can say, let's make a div here, say loading. And to do that, let's say v-if equals, and we can say Apollo.queries.

So we can say, let's make a div here, say loading. And to do that, let's say vf equals, and we can say Apollo.queries. And the name of our queries is posts, like we named here. So we can check if that's loading.posts, and we can say .loading. So if it's loading, display this. But if it's not, we can do v-else, and we don't have to check the posts variable anymore because we know it should have data. And hopefully this should work. So let me just refresh here. And quickly, you can see that loading indicator when I refresh.

Now let's do the same thing, but for a single Post. So we want to click into one of these, and then show the information for that Post. So we need a new route, and I already have the router installed using Vue CLI. So we can just add one here. We can just duplicate this route. Let's name it post. We need a route param as well, so post/{id} for now, but eventually I want to make it a slug. The name is post, and the component is Post, okay. And let's go ahead and duplicate this one, and let's name it post.vue.

The name is post, and the component is post, okay. And let's go ahead and duplicate this one, and let's name it post.vue. And let's get rid of this class here. And let's just say this is the post page for ID, and to grab the route param, we can say route.params.id. Okay let's try that out. Actually let's go ahead and link to that route from here. So in our Home view, we can make a router link. Router link, and we are going to, I'm going to use route names here. So we're going to the route name of post, and the params we're passing through are the

Router link, and we are going to, I'm going to use route names here. So we're going to the route name of post, and the params we're passing through are the ID. So let's say ID, and that's going to be post.id, okay. This should be outside of the title, and let's see if that works correctly. So back here, let's see if this links to the post page. Okay, so it is working after I refresh the page. So now we want to do the same thing, but now our query is for a single post. So let's go ahead and do that. Back to our post page here.

So let's go ahead and do that. Back to our post page here. Let me just copy the script part here, let's put it in post. Let's get rid of a few things here. This is post. And now our query is going to be different. So let's go ahead and work on that in GraphQL Playground first. So let's get rid of this. We have a single post that takes in an ID. Let's just hard code one in here, and that returns a title and a body, okay.

We have a single Post that takes in an ID. Let's just hard code one in here, and that returns a title and a body, okay. So now this Post requires a parameter here. So let's see how we can do that. So let's grab this query. Let's go back to our code. Let's paste it in here. Okay, save that. And let's just hard code it for now and see if it works. So again, let's go to our home view.

And let's just hard code it for now and see if it works. So again, let's go to our home view. So we can grab the template code. So we have this loading indicator here. We can use the same thing, but just rename it. Let's grab this as well. We can leave this and we'll put another one in here. And the query name is now post. Did I change that? I did not.

Did I change that? I did not. Let's change that to post. Okay. And instead of an unordered list, let's just change it to a div and we don't need this. Let's just say h2. Let's say post.title and then post body. And let's just put that in a div. Save that. We don't need this import here.

Save that. We don't need this import here. And let's see if this works. Okay. So we are getting the Post for the id of one, since that's what we hard coded, but it's not the correct data for this id. So let's fix that. When our query takes a parameter, then we have to define it a bit differently here. So first we have to give it a name. It doesn't matter what the name is.

So first we have to give it a name. It doesn't matter what the name is. Let's say getPost. It accepts an $id, which is a variable that we'll use. And the type is an ID and that's required. Okay. Now in here, instead of hard coding one, we can make use of that variable. But now how do we specify that the variable we're looking for is the one in the route param. So what we want to do is add an extra field on the post here.

param. So what we want to do is add an extra field on the Post here. So let's grab this GQL query here. Let's grab all of this. Let's make another field here called query. Let's paste that in. Okay. And now we can specify the variables as a method, and we can return an object with the parameter that we need.

So we can say variables as a method, and we can return an object with the parameter that we need. So in this case, the ID is this.route.params.ID. Okay. Hopefully I did that right. And I think I did. Let's double check. This one should be hello from view. And it looks like it does work. Cool.

And it looks like it does work. Cool. Let's make sure the loading indicator works. And I do see loading when I refresh the page. Let's also make sure to handle the case when there's no Post. When we just add a ID in here, as you see, it's stuck on the loading indicator. So let's fix that. So up here in a template. So after it's loading, we can check if there is a post. So let's wrap this in another div here.

So after it's loading, we can check if there is a Post. So let's wrap this in another div here. We can say if the post is not null, but if it is null, so we can say else here. Then we can just say no post was found. And that should be fine. Cool. So yeah, now our app is starting to look like a blog. We're making use of View Apollo to grab a list of posts here. And then we are linking to a specific post page when we click on one of these links. In the next video, I'll show you another way you can make queries using query components.

And then we are linking to a specific Post page when we click on one of these links. In the next video, I'll show you another way you can make queries using query components. So let me just stop this and make a commit like I always do. Let's just say git commit. Let's say view Apollo queries.