Refactoring fetchBreedList

[00:00:00]
>> So, let's go refactor, Fetch breed list. It looks really similar to fetch pet to be totally honest with you. Fetch breed list. And instead of calling pets it calls breeds and instead of this it gets animal. An ID is that instead of breeds, animal. That's it, really is it.

[00:00:51]
You could probably make some factory that generates endpoints for you. Cuz you can see here that they were basically the same thing. I usually tend to wait a while before I try and make an abstraction. I'm more of a write it three times and then if on the fourth time maybe think about it kind of person but that's just personal experience.

[00:01:13]
Abstraction is generally your enemy when it comes to the good maintainable code. So, this is again, fetch breed list. Make sure this is breeds animal equals animal, animals coming from query key, res okay then fetch do that res dot JSON fetch breed list. Okay, so this looks like it's ready to go.

[00:01:33]
So, we have all of this nonsense here in breed list we spent all this time making so pretty. And we're just gonna just blow it away. Get rid use effect. You can get rid of all this stuff. You're just gonna say import. Use query. From 10 stack and then import, fetch breed list, from fetch breed list, get rid of local cache and this is gonna turn into into const results equals use query.

[00:02:17]
Give us the cache key of breeds and then we're gonna give it animal and fetch breed list, okay,? And then here we're gonna give it results. Data. Breeds. So, this is basically saying, cuz remember the first time that it goes out to fetch that it's not going to be available, right?

[00:02:46]
It's gonna give you a loading state back. So, that's what this question mark period is doing is basically saying, if this is available, then give me that. If not, don't give me an error. And then the question mark you're basically saying if this any of this fails give me back just an empty array.

[00:03:04]
So, it's basically saying if I don't have results for this yet give me an empty array otherwise give me the results and this is results status. Does that make sense? This is like ES 2021, it's a fairly recent feature in JavaScript. So, if you haven't seen it before, very forgivable.

[00:03:27]
>> In the lesson plan, you have if no animal return an empty array is that redundant with the question mark, question mark empty array?
>> Yeah, it's probably it's better to have that. Yeah, because you don't wanna make a request with no animal. So yes, thank you, if no animal.

[00:03:47]
So if you get a request for blank then that means just return an empty array. We don't need to go to the API for that. But because it's an a sync function this will all just work exactly how you want. Okay, so, I'm gonna argue this is significantly more simple we went from having what?

[00:04:09]
How many lines was that before I've messed with this? 35 lines, to Seven. Let's go make sure this works. I go home. Nothing there, click on cat, that's all there. Go back to bird. These are all there. So, it works the same way on far less lines of code.

[00:04:48]
So, it's kinda cool that you got to implement that, how you would normally do it without like no help from a library and just to see that crap, like react query wax to do all this for me. So, Yeah, question.
>> What is the type of the result object?

[00:05:07]
>> What is the type? It's a use query result. [LAUGH] It's something that use query, it's not anything native to the browser at something particular to use query. I am showing you how to get stuff from a database, right, which is cacheable for the most part. This is also configurable on a request by request basis as well, right?

[00:05:33]
So you can say, hey, by default don't refetch things but this request, this special one, refetched this every time, right? So you can set that on a query by query basis. I don't remember the exact syntax, but you can look it up on the docs. The one here that I have not talked to because we're not posting to anything, is mutations, right?

[00:05:55]
Or posts to or put to an API, right? So that, you will use something called, instead of use query you'll do use mutation, and this allows you to post to a site, it won't cache it, right? It'll do all the correct things as well. Outside the scope of this class, I left the link to the docs down there you can see how to do it down there, but it works mostly similar to what we're looking at here.

[00:06:26]
>> Well, last question here. What happens if you have more than one parameter in your API URL?
>> I think they're talking about this. Which is to say like here, I'm only using like one id. It's a good question. If I come back to Details, right now I'm only providing one here to this array, but this array can be as long as you want.

[00:06:53]
Region, let's say I had to request it regionally, right. And cost, region equals, I don't know, let's say Zh- ch or something like that right and so here this had to go to a different region if I go back here to this is in fetch pet Const region equals query key.

[00:07:19]
To like, right, it just you can give it as many things as you want in that array, it can also be an object in fact we're about to see that, and so that would be another good option for this as well.