Factory Pattern Composable Exercise

[00:00:00]
>> Ben Hong: So you're going to go ahead and try to actually create a composable using the factory pattern because the singleton will not make sense for a fetch function, right? You're going to have a new URL you're probably parsing and basically from what you've seen in the code base with the fetch, see how much you can refactor it, how far you want to get.

[00:00:20]
If anyone has ever written their own fetch function, you probably know it's a very deep rabbit hole of configuration of methods and stuff. So, my offering to you is just keep it simple to start, right? If you only get as far as like getting the response and jsonifying it and that's it, like that's still something.

[00:00:35]
Do not try to like write a full fledged fetch function there. There are people who are very good at that and they do that for us already. This is more for. More so for the practice than anything else. So, what we're gonna do, I mentioned this earlier in the exercise, but we're just gonna do a simplified version of fetch because again, it's a pretty complicated one.

[00:00:59]
And then I did realize later on when I was updating, that we had done already a lot with the UseWeek composable. So, in the event you're looking for extra credit, one practice, the useTask composable is one that doesn't really use a store design pattern because we ended up kind of using that as the model.

[00:01:12]
So, if you're looking for an additional practice, feel free to do that. But let's go ahead and just take a look at what a used fetch composable might look like. So as we can see here, if we're looking at the code base, there is a lot of native fetch happening.

[00:01:26]
And so the goal with the usefest composable, when I ask this, and my apologies for not being clear with this, it's less so that we're not necessarily trying to replicate the fetch API itself, but if we're taking a look at kind of what's happening, it's fairly consistent in the sense that, let's see, in this one, for example, it's fetching two weeks.

[00:01:45]
It has some custom options regarding a post in the app, like the format type, but then it always stringifies the week and then it checks if the response is okay and throws an error. This pattern is fairly consistent. We see it here as well with the fetch weeks.

[00:02:02]
Here we go. Fetch API base URL weeks. If response is not okay, throw error, then await that the fetch weeks is JSON and then basically, this is what we want, right? They're like, this is what I want to return. So the idea here is I think a simplified version of used fetch would probably package something like this altogether so that it just returns exactly what we want at the end of it.

[00:02:28]
So, the way I would go about this, whoops. Is actually, let me just go ahead and copy this while I'm at it, since I'm already in here, is we'll go inside of our composables folder and we'll create a usefetch. And the reason we're doing it, you might be wondering why in composable is because I intend on returning a reactive object.

[00:02:51]
I plan on using views or reactivity as part of this. You have a choice here. You might be thinking, well, could I do a singleton for this? UseFetch equals something. But useFetch is a function. So you're inherently going to be using a factory function for this kind of composal because ultimately you're not really trying to share state between your fetches.

[00:03:13]
There are some things we'll share, which we'll see very shortly, but otherwise. Yeah, so a couple of things. Here's what we want to export. We know this thing is definitely consistent. This is an example of something that really just sits outside API base URL and I believe we have it already there then actually, for those wondering what that was, that was Raycast clipboard history.

[00:03:42]
So you can search through it. It's. That's pretty nice. And then. Okay, so we got that. And so basically here I find that people generally tend to include the slash when they're doing like their URLs. So as a result, I'm just going to do a URL that's going to be a string and then what are we going to return?

[00:04:03]
We're gonna return, I don't actually know the, actually we mentioned this. We're not gonna do too much with types right now. Okay, so this is where then this part kind of comes into play. So we're putting that inside of the usefetch. So, we're gonna pass it basically the API base URL.

[00:04:23]
Although I don't need to do it this way, actually. API base URL plus URL, that's what we're appending. This needs to be async because we have an await inside of here. So then we say, okay, throw error. Yep, this is a generic thing, right? If throw an error if the response is not okay.

[00:04:44]
Otherwise what we're going to do here and this is where we're going to be more genericized. We're going to const return a weight response. That should do the trick if I read it correctly. Okay. The main other thing I need to do is I do like to do the maybe refer getter.

[00:05:06]
So, I'm gonna drop that here of string. Okay. And here I think we have a basic use fetch function. And so the way we can test this is we can go ahead and basically import usefetch from our new composable. And again, let's go ahead and do it like this.

[00:05:33]
Composable like that, that way it's more consistent. All right, then from here we now know we no longer need all of this. What we should get is to be able to await used fetch weeks. I believe it was weeks. Is this the only one that had it? Yes, I was right.

[00:06:00]
Okay, Weeks. And then I think that's it. That's it. Okay, so if this works as intended, where are we using useweek? We are currently using it. Let's see. It looks like we're using it inside of the planner, so. Wait, Nope. This is in the composable. Where's the fetchweek being called?

[00:06:34]
We're calling it. Okay, it looks like we're calling it inside of taskform modal. Okay, so this is where we'll test it. Server is down. So let's call that. Let me switch branches before I forget git checkout. 05-solution. Okay, cool. We're up and running. And then if we go ahead and take a look at our task and then wait.

[00:07:06]
Task modal. That's what it is. So I need to edit it. Okay, now something's funky. What is funky?
>> Speaker 2: You still need to return weeks from your-
>> Ben Hong: So I did not return weeks from it.
>> Speaker 2: Use the use fetch function. You didn't actually return weeks from that.

[00:07:22]
>> Ben Hong: Right. So then basically what we need to do then here const. Well, yes. Right, so we can say const. I mean, we could say this. Is that what you're saying?
>> Speaker 2: I believe so.
>> Ben Hong: Okay, let's give it a shot. We refresh, we edit the task. What's yelling at me?

[00:07:54]
Probably weeks assets but not defined during instance base modal. Okay, so something with the weeks is not being defined correctly.
>> Speaker 3: You changed the value that was there.
>> Ben Hong: This one.
>> Speaker 3: Correct.
>> Ben Hong: So weeks of value equals.
>> Speaker 3: It was called something else prior to that. Was it that was being said.

[00:08:16]
>> Ben Hong: Okay, last it was.
>> Speaker 2: Fetchedweeks, it's just the name of the response though, right? Was it, okay?
>> Ben Hong: Yes, isn't that fetchweeks?
>> Speaker 2: It looks identical.
>> Ben Hong: Yeah, so that looks, the signature looks right. So it must be a way that I implemented this that's causing it to not.

[00:08:42]
I mean easiest thing is just log the response real quick. Clear refresh. That's it right here. Maybe it's just not. Yeah, so that's being called.
>> Speaker 3: Did we have to go too ref or too value with the URL that we passed in?
>> Ben Hong: That is a good question, right now, it is you're totally right.

[00:09:13]
We did not follow that pattern because the use fetch right now is using a maybe. But it actually, for now it actually is assuming URL value. It is assuming that. So, but I will make sure this is at least consistent.
>> Speaker 2: I'd point out it's entirely possible that this is broken through three exercises ago and not realized.

[00:09:37]
>> Ben Hong: That is totally true. Yes, this is totally fair. So I mean, let's see, where's that console log living? It's living in use week. So yeah, this is totally fair. Let's see. Well actually if anything we should know the planner should at least have it. So the planner here.

[00:09:55]
Okay, so we know. Okay, so let's. We know planner was working right now. So let's go ahead and take a look at that. So planners here. Okay, weeks right now is being brought in. Actually that's kind of interesting. Because it's doing its own fetch here. Okay, so we are gonna knock this out and we're gonna see if we can get it to work.

[00:10:17]
Await weekStore which we did not import use weekStore, right? And then here const weakStore = useWeekStore. Okay, that's that. Then it freshes the weeks handle we created. Then this also then needs a weekStore.fetchweeks and anything else. Yep, one more weekStore.fetchweeks. Okay, I think that's everything. Yep, that looks good.

[00:11:05]
Okay, it looks like this is fine. So like you said, there's probably something that's going finicky on the modal right now because we're not doing a bunch, we're not doing full refactors. And so there we have an example of kind of a again, overly simplified use fetch function.

[00:11:23]
Again, if you're going to do this, at least look at what the nuxt team is doing. There's a bunch of people who already have these sort of composable fetch functions that are very, very robust, configurable handles, all the methods, blah blah, blah, great patterns. So be sure to check that out.