Typing Pet Component & Error Boundary

[00:00:00]
>> We are gonna do Pet.JSX now, pretty short little component here. You can see it's very upset at the moment. Changes from pet.JSX to pet.TSX, please. We're gonna make an interface up here of IProps, and we're gonna. Yeah, we're just gonna give it a name: string, animal. I guess this could be an animal that we get from the pets type.

[00:00:38]
So let's, let's do that. That's fun. Breed: string. There's a temptation here and there's a valid reason that you could probably just say here that the props here is actually a pet, right? 'Cuz we already typed that. But the thing is, this actually doesn't need everything that's in a pet.

[00:00:58]
And so, if you tell that this is definitely gonna be a pet, that means you're gonna have to start providing into props that it's not gonna use anyway. So I don't care for that, so I'm not going to do that. But I respect your ability to be wrong about things, so you know do what you wanna do.

[00:01:17]
That's a joke, yeah, there's valid reasons to do it that way as well ID number And then here we're just gonna say that props are IProps. And you can see that's enough for it to be like okay, I got it. I got everything I need to do now.

[00:01:43]
So in previous versions of this course, I had taught making Pet a function component like this. Like that, and you give it IProps like that. You can totally do it this way. I'm just following the lead basically of the Create React app TypeScript starter project which is maintained by the creators of React.

[00:02:12]
Let's just go take a look there's a link down here why I linked to the actual, Where is it error? We just did Pet, right? Pet under type script. We missed error boundary. We'll go back and do that in just a second. You can do here a click here, and you can see this issue here where they describe why they recommend not doing FC, which stands for functional component here.

[00:02:44]
It's a bit more stricter about some things as it's less strict about other things. It's kind of up to you how you wanna handle this, but I don't really have a whole I don't really care to be totally honest with you. Either one of those is really valid up.

[00:02:58]
So, I mean, at the end of the day, if you do it this way, which is less typing, which is nice. If you mouse over this, you can see that it's a props that returns a JSX element. That's exactly what we want. It's fine being simple this way.

[00:03:15]
I'll leave it to your discretion of how you wanna handle that. Okay, any questions about pet? That was a pretty straightforward one. We just had identify the props, and it was good after that. Let's go do ErrorBoundary. ErrorBoundary, which is here, we're gonna rename that to be ErrorBoundary.TSX.

[00:03:45]
Okay, we're gonna import ErrorInfo up here, and ReactElement. Class, ErrorBoundary, extends, component. You can do IProps again here, or you can actually just put it directly in here. So I just wanted to show you both ways of doing this. children: ReactElement. Okay, and then error here. Error is an error And info is ErrorInfo ErrorInfo, like that, Okay, that's it, that's all you need to do.

[00:04:51]
That one's pretty straightforward, right? Just identify what kinda props it's taking in, and then with these methods here, you kinda have to identify what parameters you're gonna expect to see in there, Okay? So, we just did carousel, we did Pet, let's go do all the fetches. So let's start with fetchPet.js.

[00:05:19]
You can make that fetchPet.ts. So first thing up here, we're going to import a query function from Tan Stack. This is gonna be a type that comes from Tan Stack Query, and we're just gonna identify specifically that we think fetchPet is a query function, okay? And that it gives you back a PetAPI response, which we're gonna get here from API responses types, And that we expect the query key to be details and then a string.

[00:06:11]
So, the first thing here is what we expect to get back. The second thing here is what we expect the key to be. What I find really cool about this is now if we try and go call fetchPet somewhere else without the correct kind of query key, it's gonna say like, hey, you told me that this is what you expected here.

[00:06:25]
This is not what I'm seeing, please do it that way. And we also have to validate here that this ID is gonna be a string. We've said here, this is definitely gonna be a string and so we try and call it later without a string. It's gonna be like, no, I'm not gonna let you do that, you have to do it this way.

[00:06:48]
That was pretty straightforward, hopefully Let's go and do fetchSearch. We're gonna change that to .ts And we're gonna see, it's gonna look pretty, similar I think. Import QueryFunction from @tanstack/react-query. This is going to be a query function. It's gonna get back a PetAPI response, and it takes in a First thing is gonna be search.

[00:07:35]
And after that it takes in an object. And that object is gonna have in it location, which is gonna be a string:Animal, which is gonna be an animal technically And a breed which is gonna be a string What did I miss up here? QueryFunction, Pet Response, search. Let me get this on multiple lines cuz I'm having a hard time parsing this.

[00:08:20]
Async function, you do have to kind of, yeah, okay, sorry. So I'm going to refactor this a const fetch Equals that. I'm making this into an arrow function cuz the types look a lot better. You can still type it the other way, but this is just a little bit easier for me to read like this.

[00:08:48]
And we're is still exporting a fetchSearch here at the bottom, but I had this as like an async function. This just typed a little bit easier to do it the other way. Okay, we're still having an await issue here. Do I not have this as an async function?

[00:09:06]
You do have to have this as an async function, there we go