Okay.
Now that we're using RTK query to go and get the products, let's do the same.
But of course for the fetch products.
Now in our catalog API, we've already I say we've created this hook, but it's been created on our
behalf to go out and get an individual product.
So let's go make use of this and we'll open up the product details.
And inside here let's go up to the top.
And once again we're using the Useeffect.
We've got the Usestate.
And we're well we're not checking to see if we are loading.
We're just checking to see if we have or do not have the product.
So we can remove the useeffect and the use state.
We no longer need that.
Now we do still need the ID of course, because that's where we're getting the ID of the product we
want to load and we're going to say const and in curly brackets.
We'll specify data.
And what we can do if we want the data to be we have to use data because that's what's being returned
to us.
But if we want to use it as a different name, we can add a colon and then specify products instead.
So we don't need to change the rest of our code here.
And we can also use the Isloading again that we get from our hook.
And we're going to use the Usefetch product details query.
And we can pass in here the arguments we need.
Now the way that these parameters work, then we may need to do something a little bit funky here.
We'll see how it goes.
But last time I wasn't able to just specify the ID as a number inside here.
We'll see.
And if I try the ID then sure, I get a warning.
And the warning tells me that argument of type string or undefined is not assignable to type number
or unique symbol.
And the reason is is because I use params.
Then if we hover over the id, then the id itself.
Well, at the time of typing the code, or when we're writing this code, our compiler doesn't know
if we have the id, because our compiler, of course cannot read a URL that hasn't been input yet by
the user, so it doesn't know if that ID is going to be available.
So it's defined as a string or undefined.
And we can't pass a string.
That could be a string or it could be undefined.
So we effectively need to check be defensive for our ID here.
So I'm going to add a question mark and say it's going to be the ID or it's going to be zero as in we
don't have an ID but now we've got another complaint.
Is that the same complaint or is it a different one.
And because our URL is a string, then it tells us the argument of type string or zero is not assignable
to type number.
And because I've defined in the catalog API that we're expecting a type of number here, then that is
what we have to pass to the query.
So back in our product details, if we want to convert what is a string to a number, we can use something
like pass int which is a function.
Or we can use the shorthand version.
And when I say pass int it's using this.
And then using the id as a parameter here, that would work.
And there's a shorthand way of doing this, though instead of Parseint, we can just use plus the plus
symbol, and that will cast that into a number.
And then we can check to see if we're loading.
So we'll stick with the check to see if we have or do not have the product.
And I'll say or is loading with the double pipe there for the Or condition.
And then we can remove the unused imports at the top as well.
And also the use effect and the use state.
We're not using those anymore.
So we can get rid of those.
And what we should have now is a clean component.
Marvelous.
But does it work?
And let's go take a look.
So let's just refresh the page and we see the little loading.
And if I go to view a product we see loading again.
But we've got our product.
And if I go back to the catalog no loading.
If I go back to the product I just viewed no loading.
And that will be the same here as well.
And if I go to a different product, I didn't see the loading there.
But sometimes things are just fast and I was expecting to see loading for level two, but perhaps not.
And sure.
But everything's a bit too quick at the moment, and we will add some fake delay so that we can genuinely
see if there is loading happening.
Because when everything's local on our developer machine, then there's not a great deal of loading
going on between our user interface, our API, back end, our database.
Everything can happen very, very quickly.
So we will at some point in the not too distant future, add a fake delay to this.
And what I'd recommend now is you spend a bit of time with your react dev tools and take a look and
make different queries and just practice.
Take a look at the different tools that we have at our disposal inside Chrome, and just click around
a bit and just practice using these tools, see what's going on.
Just become familiar with them just for a couple of minutes.
And what we're going to take a look at next is creating a custom based query so we can centralize our
query logic to the API, which will help us out as we build the rest of our application.