com API. And here I'm fetching the user with the ID of one. Now on the page, you can see the dump of all this user data. com provides.
Now let's say that I was displaying a profile page for the user and really all I needed to know about that user was Let's say what their first name and their last name was. Well, I can do that easily with the pick option on useFetch. For responses that return an object, pick allows you to declare the properties that you want to include in the payload as an array. So here I would just say last name and first name.
Awesome. Now we are getting a red squiggly line here under useFetch. because we're making a request to a third party API. So it doesn't know what the return, what the response from this API looks like.
Therefore, it's saying that I cannot assure you that first name and last name are properties on the object that's returned from the API. So for third party APIs, what you'll want to do is manually type those returns. Here we could say last name is going to be a string and then first name is also a string. Great.
Ideally, you would want to type out the entire object, but we're not going to do that for the sake of brevity in this video. And of course, it doesn't have to be done inline inside of use fetch. It could be a type inside of a types file somewhere else in your project. I'll save this now and over in the browser.
Now only the last name and the first name print to the page. If I open up the browser dev tools here and open up the payload, you can see that that's all that's included in the payload as well. So the pick option is helpful for making your payload smaller, giving you just a slight performance boost. However, do note that this doesn't actually change what your API endpoint returns.
So if I go to the About page, And then back to the users page, let me open up my browser dev tools here, go to the network tab and open up that request. Notice here that I'm still getting all the data back from the actual API endpoint. So this is one very important thing to note for the pick option. You're not actually limiting what's returned from the API endpoint.
You don't have control over that in this case. you're just making sure the payload is a little bit smaller on initial page load. So don't confuse the difference between using pick and then actually only returning certain data from an API endpoint. If you did have control over this API endpoint, it would be better to provide some kind of maybe query string that allows you to filter which properties you actually want to include.
That would mean less work for your database and less data to have to send over the wire for your client-side API calls. But for cases where you don't have control over the API endpoint, then PIC is a great option. Now, what if you were returning something besides an object? Let's say you were returning a whole list of users.
Then PIC would not work. This is not an object that we can pick properties for. It's an array of users. Well, this is where the transform function that we've learned about in the previous video can come in handy as well.
In this case, let's map over all of our users and provide a callback function that returns only the properties we want for each user. Now, once again, I am getting a red squiggly line here because map does not exist on an object. But let's just update our type here to say that this is actually an array of these objects Great. So now for each user in that array I want to return a new object that only includes the first name and the last name and then finally I'll return this new array Okay, it looks like I've got something wrong with my request here Let's actually open up this URL, and I think maybe I've got this wrong.
Perhaps it has some kind of metadata on it. Yeah, indeed that's the case. It has users nested underneath a property called users. So instead of saying that this is an array of users, really this should be an object with a user's property on it that is an array of users.
users. And then I will return an object with a user's property on it, and that user's property will be equal to this refined user's data. Over in the browser now, there we go. We've replicated pick, but for an array of data instead of an object.