Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Already a member? Sign in to continue

Playing

11. Picking data

Transcript

00:00

We know from previous episode that when

00:01

we click on each of these to-do items, we go through to to-do slash ID. And that will give in the ID of the to-do that we have here. We did that over on the index just here,

00:12

where we pass in the ID directly from that payload. What we're going to do in this episode is hook up this ID page, practice what we've learned with use fetch, hook this up to actually make a request

00:25

and get back the details of the to-do. And then we're going to talk about a really important best practice in NUX 3, which is data picking. So at the moment, over on this page

00:34

just here, all we're doing is showing the ID that we get from the root, and we're console logging it out here as well. Let's change this over so we can actually make a request

00:44

and grab this data. So we know that we want to do a top level await here. We can use use fetch or, like we did over in index, use user async data.

00:55

It's entirely up to you. Use fetch is probably a little bit easier to use and remember. I'm going to go ahead and pass the URL that we want to request here, which,

01:04

if we come back over to index, is just this here, but then slash and then the ID. Let's go back to ID, pop that in there, and then let's do a slash and just add the ID into this request.

01:16

So let's go ahead and take this from our root, params, and ID. We've already seen that in action, and we know that gives us back the ID that we need. So like with the request that we made over on to-dos,

01:30

we can pass a object down to this. So we can go ahead and pass this in as the second. We can set defer here if we want to. We're not going to do that in this case.

01:40

We'll be adding another option in here in just a second. Let's go ahead and destructure this and assign data, like we did before, to to-do. And let's just space this out a little bit.

01:52

And now we should have that to-do on the page. Let's go ahead and just dump the payload out of to-do. Let's go back over, give this a refresh, and there we go. That's the payload of that request

02:01

that we're making to that server. So we can just output whatever we want here. Let's just say to-do title, and that should just about do it. So we've got the details of the to-do on this page.

02:13

Now, with the overall to-do, which we have just here, let's go ahead and get rid of title on there, we've got a little bit more data, or we may have a little bit more data than we need in here,

02:22

depending on the data that the API you're making a request to sends back. Now, if, for example, we were only using the title in here, which is, of course, unlikely,

02:34

then what we can do in NUX3 is pick out only the data that we need to be stored in this payload. Now, this is really important because when we use useAsyncData or useFetch,

02:46

the data that we get back from this is stored inside of the page payload. And if you are storing more data than you need, you're gonna see a performance decrease.

02:57

So the best practice here would be to pass in the object that we see here, and then pick out just the data that we need. Let's just say that that was ID and title.

03:09

Let's go ahead and just take a look at what to-do contains now. We'll go ahead and comment this one out. So let's go over, give this a refresh, and there we go.

03:15

Sure enough, we only have the ID and the title. So I'd recommend that you do this for any request that you make and pick out just the data that you need.

03:25

Now, unfortunately, at the time of recording, this doesn't work for objects or arrays that contain multiple objects. So for example, over on our to-dos page here,

03:34

what we couldn't do is go ahead and pick out the, say, ID and the title from this array that we get back from this request of objects that we have in here.

03:46

That might be added later, or you might be able to get around that somehow, but for now, it's just going to be for single-level things with keys and values.

03:54

So we've now got just the data we need. We can go ahead and use that as we need. So we can put that in there, and then we could output the to-do ID.

04:03

But that's a really important addition to Nuxt where we can pick out just the data we need so that the payload on the page has less data and therefore a performance increase.

Episode summary

In this episode, we're taking what we've already learned about dynamic routes and fetching data in Nuxt 3, and applying it to our to-do app. We start by hooking up the /todo/:id page so that when you click on a to-do item, you actually see the details for that specific to-do. We'll use Nuxt's useFetch (or useAsyncData) to make an API request for the to-do details, using the ID from the route params.

The main focus of this episode, though, is on the concept of data picking. When we fetch data from an API, often the response gives us way more information than we actually need for our page. Nuxt allows us to extract (or "pick") only the specific pieces of data we want—like id and title—instead of keeping the whole payload. This not only cleans up our components but also helps performance, since the page payload size is reduced.

We'll walk through how to set this up in your data-fetching logic, and you'll see the difference it makes right away. We'll also touch on the current limitations: data picking only works for plain objects (not arrays of objects). Still, it's a super helpful best practice to keep your app efficient and tidy!

By the end of the episode, your detail pages will be showing just what you need, and your app will be a bit speedier too.

Episode discussion

No comments, yet. Be the first!