Create a Data-Driven Vue 3 Component with Apollo
Time to use the Apollo client and Vue Apollo Composable to make a query and use the resulting data in our Vue component.
To make this happen we'll be using the useQuery and useResult composables to make the query and use its result. Then we'll take that data and loop over it using v-for.
Kevin Cunningham: [0:00] Let's create a new component to list our crafts. Call it CraftList.vue, and we will use the script setup form, our template, and our style, which is going to be scoped to this component.
[0:14] The first thing we'll do is we're going to get our craftQuery, which we have used over here, and we'll bring it over here. We'll need to import gql from apollo/client/core. Nice.
[0:32] We want to be able to use this query. To do that, we're going to import useQuery from vue/apollo-composable. We're going to destructure the result from useQuery, and we're going to pass in our craftQuery.
[0:50] We want to be able to use this result. Apollo-composable has a useResult composable that we can use here. We're going to say the data is going to equal useResult of result. If there's no data, we're going to say null. If there is data, we specifically want the data.crafts.edges. We want the array of names.
[1:15] We have our data. Let's go to our template. In our template, we're going to have h1, "Welcome to our Kayak Store." In Vue 3, we can have multiple route elements inside of our template, so we don't need to wrap these in a div. We can just keep going.
[1:31] Let's have a h2, which is going to be our "Current Crafts." Under the crafts will be a new ul, and for each craft we're going to have an li, v-for craft in data. We're going to iterate over all of the items of the data array, and we're going to call each item craft. That's the way you deal with that.
[1:54] Let's get the ID as well as the name so we can use the ID as a way to code this. We'll have craft.id for our key. For the moment, we'll just show craft.name. The store is good.
[2:07] If we come back to main.js, we don't need our defaultClient to do this query anymore. We're going to do that through are composable. Then we're going to go to App.vue. Instead of our Hello World and everything else that's in there, we'll get rid of all of this.
[2:26] Let's import craftList from, and in components/CraftList.vue, and then we'll use the craftList here. Cool. We've got a list of the craft. We have defined our client in here, which we're providing. In our caftList, this useQuery composable is depending on the client that we're providing. UseResult is using that data, and then we're passing it in to our component.
[2:55] If we go to our endpoint API, there are lots of other fields that we can fill in here. We can get the ID, like we've said. Other things we can get, we can get the type of craft. We can get the price. We can get the age. Each craft either has an owner or doesn't.
[3:11] If it has an owner, we can get the ID of the owner. We can get the owner's first name. We can get the owners last name. Let's see what that looks like. That looks pretty good. Let's take this query and bring it back over to here. Everything's still working fine.
[3:28] Let's add a little bit of styling. Let's have that in a grid in two columns. Nice. Let's get rid of the bullet points. That's list-style: none. We're starting to see our list of crafts here, and so we've built our first data-driven component.