Composition API Exercise

[00:00:00]
>> What I want you to try to do is you're gonna go ahead and take that UsersPage that you're working on again. And this time, see what you can do on that component to actually use the setup function to refactor at the bare minimum, the fetch data. And then, if you have the time, feel free to go ahead and practice using the ref, reactive, computed, or whatever you prefer.

[00:00:20]
All right, how did that feel for everyone? I know that we did some pairing here in the room, but people online, tryna let me know how that experience went, if you have questions. In the meantime, I'm gonna go ahead and start walking through the solution to see how I would approach this.

[00:00:35]
Okay, so let's go ahead and dive into the code. As you can see here, what we wanna do is we wanna migrate the stuff we've been doing, especially as far as the fetch stuff, into our setup function. So let's go ahead and start doing that. First thing first, again, I always like to put my setup before data as a reminder to myself that this is not going to actually be able to access anything below it, right?

[00:00:57]
It can go top down, but there's nothing going bottom up. So let's do a couple things, let's see. All right, so this method here, async functions, let's start actually by moving the data. The data here, I'm gonna go ahead and use the reactive, since that's something that at least feels a little bit more familiar to people.

[00:01:14]
And I think when they're first getting started with composition API. So we'll import reactive from Vue. And we'll create that state, which is gonna be a reactive object. And inside of there, I'm gonna have this thing called userList. And userLists will then be this array. And so this allows me to then get rid of this data property.

[00:01:36]
The only thing we need to do now is actually return the state here. And then to show that this works, what we can do is you can say this.state.userList. And then if everything should still work, the only thing we have to change is here, state.userList, and we save that.

[00:01:52]
Let's go and see, we refresh, up, it's down, because why? Because there's no local dev running. Okay, there you go, you can see everything's still working. All right, so refactored step one, good to go. Next thing we need to do, the main thing we wanna do, is dysfunction of methods.

[00:02:11]
And so some of you caught on, because you might be thinking, wait, is there a methods thing that I need to import from Vue? And the answer is no, because when we introduced methods earlier, remember what I said? Methods are really just JavaScript functions that Vue has access to.

[00:02:29]
So in other words, there's nothing special about them, because they're JavaScript functions. So what we can do, we can take this and we can copy this here, and basically say, this is an async function called fetchUsers. Now, before we move on, though, there's couple of things that's gonna break.

[00:02:46]
One, we know for a fact that this does not work anymore, because why? We're not in options API, we're in composition API. So we have the state here, that's deleted. And then this is currently state.userList, we'll equal that, and we have the async here. And so what we need to do is let's go ahead and we also don't have, or actually, wait, there's a function there, that's fine.

[00:03:10]
And then, let's go and start by returning it. We'll slowly refactor this, so we can see it step by step, piece by piece. [SOUND] There's that. Now, we save this though, you'll notice everything seems to still be working, and so we'll see that, hello, hello. And so here's the thing, though, is that right now, fetchUsers has a very implicit tie to our state right now.

[00:03:37]
In other words, if we wanted to fetchUsers in another context, we would then need to create another function theoretically. But this is JavaScript, this is programming, we don't want that, that's something that wouldn't make a lot of sense. And so what you'd probably wanna do is actually separate the state assignment here from the function itself.

[00:03:52]
So in other words, what we'd like to do is actually say, state.userList out here is equal to what happens when we run fetchUsers. That's actually what we'd like to do. And so what we'd really want is to basically kind of return the response that comes from this. So when you're looking at this, and you're looking at the return, you might think, okay, I'm just gonna return the promise.

[00:04:10]
Now, apparently when it comes to returning promises inside of Vue, it gets a little bit tricky because then you have to manage resolving the promise and that kinda stuff. And so at least for me, what I tried to do actually is I will actually just create the response that's being awaited.

[00:04:24]
So basically this const response, and what I do is return the response directly. And that's what's being returned, rather than returning the entire promise itself. And that's what should allow this thing to assign itself to this. But before we finish, though, remember that fetchUsers is an async function, which means what?

[00:04:41]
We need the await keyword here. And if we need the await keyword here, what does that mean? We also need the async key all the way up here inside of setup. And then we save that, we get our predictable yelling at us message. And the reason for that is because why?

[00:04:58]
Because the parent is like, whoa, whoa, whoa, you have this async function, it might be broken, give me something to fall back on. So let's go and fix that. If you go inside of App.vue, inside a C'est la Vue, we had this component here. And so what we're gonna do is we're gonna wrap it in a suspense component, and then we have our template with the v-slot of fallback.

[00:05:20]
And then what we'll do here is then go, data is loading safe. And if you actually saw the small blink, it actually does do the data is loading, because Vue is actually waiting for something. So, granted, again, for your production level apps, you probably will want some sort of nice loading page and whatnot for that.

[00:05:39]
But for now, we're just doing it with simple text. But now, if we take a look, it looks like everything is working as expected. Now, the thing is though, we're actually doing a double call here, if you realize it. In that we're returning this fetchUsers method, but it's actually already being called inside of your setup method.

[00:05:56]
So really, we don't even need this here. So we can actually delete our entire created life cycle hook. And what you have now here is basically your entire user page using the composition API within the options API. And everything is working as expected, thankfully.