Typing Component with React Query

[00:00:00]
>> Let's do breed list. Data.ts file as well. Before we do that, pop over to your API response types. We need one more type of response, export interface. We're gonna call this a BreedListAPIResponse. And it takes an animal or gives you back an animal, which is of type animal, and breeds which is going to be a list of strings.

[00:00:40]
Okay, pretty straightforward type right there. And then here in fetch breeds.ts, same thing here, I'm gonna make this an async arrow function. So const, Okay, this is now an arrow function. Still mad about the props, but let's go fix that. This is going to be a query function from tansack query.

[00:01:26]
This is going to have a breed list response. And the key for that, is I think gonna be Breeds, And an animal. And that is enough to successfully type that. Cuz now it knows, And actually, I think now you don't even have to do this part anymore. Cuz right now we're demanding that it always gives you an animal, right?

[00:02:11]
So there's no reason that we need to do any sort of like type refinement there. You can leave it there. There's no harm in it being there, but TypeScript would catch that first, right, before your runtime code would. I hadn't noticed that till now, but. I guess that's one of the cool things about TypeScript as well, is like, I moused over this it's like this is definitely an animal, which means that Line 10 here, this will never happen, right?

[00:02:42]
Kinda cool. Okay, we are now to TypeScript-3, if you need to catch up. So let's go do use breed list. Change that to use breedlist.ts, this is a custom hook. A little bit of stuff to type here. So use breedlist, export default function useBreedList. Animal here is gonna be an animal.

[00:03:21]
You can put that in there. Use query here with breeds animal fetch list. That's all fine. That looks like it works just great. Okay, and then here we just need to definitively type, this is what I need to show you. Right now if you mouse over this, you can see that, it thinks that this array that we're returning is, everything in here can either be a breed list, or it can be a status, right?

[00:04:09]
When in reality we actually have a very specific kind of tuple type here, and we need to identify two types, which is like, no, literally always the 0 with element in this is going to be a breed list. The second element is always gonna be a status. We cannot switch that, we cannot have more things than that.

[00:04:27]
It's always exactly this. That makes sense? Otherwise it thinks it's just a mix of this and it can be either one all the time, which is a valid assumption for TypeScript to make. So you can just say, as here, to identify. We actually want to identify this as string bra string array.

[00:04:47]
And what do we have here? Query status. And now you can see here we've refined that, that it always returns this particular shape of a return type. That makes sense? Otherwise, anytime that you use this result here, you have to check, is this a string list or is it a status?

[00:05:12]
The same thing here for the query status. But by doing it this way we've said, this is definitely, this is definitely this, always assume it's gonna be this way.