Pass an Id in a Vue 3 app through Query Parameters to a GraphQL Query
We can also make our GraphQL queries dynamic by using query parameters. In this lesson, we create a query for the CraftView page, which requires an ID that we pass through query parameters.
In our Vue app, we can dynamically pass the id into the second argument of the useQuery composable. We get the id from the route using the useRoute composable.
Instructor: [0:00] So rather than just showing the craft ID, I would like to query GraphQL with this ID, and use that ID to be able to get the detail from the craft. Let's copy that ID and go visit our API. Get rid of this, and I go to documentation.
[0:17] We have a query called craftByID. We can say, query craftByID, and we want to be able to pass in the ID. From that craft, we want to get all the details that we've had before, so the name, the type, brand, the price, the age, and from the owner, we want the owner's ID, and the first name and the last.
[0:45] Great. To be able to pass in the ID in GraphQL, in our query, we're going to pass in this $ID variable, and we need to give it a type. We can see it needs to be of type ID, so we'll do that, type ID. Then, we go to our query variables and we pass in a JSON object with the variable name, without the dollar sign, to ID, equal to that ID that we copied from our page.
[1:08] When we run, we can see we're getting those details. We want to use these details on this page. We have the query, so let's bring this with us to our template. We're going to do our script setup, and so our query's going to look very similar. const craft query = gql, and then everything that we have done over there. We're going to import our gql from @apollo/client/core.
[1:37] Then, we're going to use the query. We're going to say, const result, like we've done before, equals useQuery, that we'll import from @vue/apollo-composable. We're also going to need useResult. In useQuery, we're going to pass in our CraftQuery that we've structured up here. We need to pass in a variable for the ID. That needs to be the route params ID.
[2:04] The setup function happens before the component has been instantiated. We need to reach out and get the route through a composable. We're going to, import { useRoute } from 'vue-router', because vue-router comes with that component. We're going to say that the route is useRoute. From that route, we're going to get the params and the ID, like we've done down here.
[2:35] We get the result. What do we do after we've got the result? We say, we get the data.
[2:40] To do that, we use the result and we say, the result, if there's no result, return null, otherwise take the data from the result and get me data.craft. First level inside of our query, so data.craft. That will be assigned to this data variable.
[3:00] Then, in my template, I'm going to json.stringify data. At home, I'll click on one of these, and then go on and get the stringify. That's Raid, that's what we clicked on. Shelon 140 with no owner, Shelon 140, no owner, and then Grand Narc owned by Julian Ferry.
[3:26] It's pretty fast anyway, but as we refresh, we know that GraphQL is caching that value, or Apollo Client is caching that value. It's super fast on the way back.