Okay.
So to continue on from the previous lesson, what we have here is the create API function.
And in here we specify how we want to go and fetch our data.
And what this creates API gives us.
Well let's write the code and then I'll talk about it as we go through this.
Because this is pretty cool.
And we give this a reducer path and we specify or if we don't specify this it's just going to be API.
But we're going to have several of these little create APIs for different features in our application.
So I'm going to give this a name of catalog API.
Then we give it a base query.
And what comes along with the RTK query is we've got a fetch base query that we can utilize.
So I'll bring this in.
And then we can specify in parentheses the base URL.
And I'm still just for the short term going to hard code this in.
And I'll say forward slash API.
After the 5001 I'll add a comma and then we specify the Endpoints.
These are the API endpoints that we're going to hit.
That's going to go out and fetch our data and bring it back into our application.
So after the endpoints we specify builder inside parentheses.
Then we add an arrow open more parentheses.
Open curly brackets and then press return.
And then we give our query a name.
So I'm going to call this fetch products.
And we specify after a colon builder.
And then we specify a query.
And then we specify inside angle brackets the result type.
What are we going to get back from our API.
That's the first type parameter.
And the second type parameter is any query arguments that we need to specify along with this request.
Now this is just going to go and get our list of products.
So we don't specify any query arguments for this.
But we are going to get back a product array from this.
And then the second argument which we do need to provide for the type Filetype argument is just going
to be void, because we don't have any arguments to pass up for this request yet.
Then we open parentheses, more curly brackets, and then we can define the query that we're going to
make to our API.
So this is a callback function.
So we add parentheses then the arrow.
And then in more parentheses in curly brackets we pass this as an object.
We'll specify URL.
And then we just specify in quotes products.
Because this is the URL we're going to make the request from.
So it's going to go to this URL the base URL plus forward slash products.
But we don't need the forward slash here.
And we don't need a trailing forward slash here either.
RQ query is going to correctly append this as a route parameter onto the base URL.
Now we'll also create a second endpoint query.
And this one we're going to call fetch products Details and we specify builder query.
And once again in the type parameters we'll specify product.
This one does take a type argument because we need to know our product ID, which is a type of number
that we'll use as the argument parameter layer or the type parameter layer.
Open parentheses.
Open curly brackets, specify the query.
And then we're going to specify the product id as the argument.
We use that here.
And then in backticks we're going to specify products forward slash dollar.
And then the product ID the argument we're passing in here.
So what this creates API does for us.
This actually generates react hooks that we can use inside our components.
So below the create API I'm going to say export const and then in curly brackets or just add empty curly
brackets.
For the time being we're just going to say equals catalog API.
And then inside the curly brackets if I start typing you, then I can see all of the different react
hooks that have been created for us from this small amount of code.
So we have a use fetch product details query.
I use fetch products query.
We've got to use lazy fetch for both of them as well.
And these are the four hooks based on our two endpoints we have.
We can either lazily fetch them, which means we do something in relation to a button click.
For example, we'd ask the user to click on or if we use this one, then it operates like a Useeffect
as a side effect, when our component mounts, it goes and fetches the products.
So great.
We're going to effectively export the use fetch product detail query and also the use fetch products
query.
We don't need the lazy versions of this.
So now we have our catalog API.
We next need to tell our store about this.
So let's head over to inside the App Store stores.
Let's go and add this inside here.
Now we add this as or inside our reducer, but we define it a slightly different way to how we did our
counter.
So in square brackets I'm going to specify catalog API and make sure we bring this in as well from our
Features catalog folder.
And then we specify the reducer path that we defined in that store.
And then we add a colon and we'll say catalog API and reducer.
And then add a comma.
Now there's something else that we need to add specifically for API slices that we've just created.
We need to also add middleware here.
So I'm going to specify middleware.
And then there's a function we need.
We'll call it get default middleware.
And then we add an arrow.
And then we can use that function get default middleware.
This all comes from the toolkit.
We don't need to define this function ourselves.
And then we can concat.
And in parentheses we can say catalog API and middleware.
So we're just configuring this to be used by our Redux store.
And we need this middleware because this is responsible for actually handling the API request.
It intercepts dispatched actions related to queries and it initiates the fetching process.
It also helps us with caching and cache invalidation.
We'll talk about that as we come across it, but it's all automatic for us.
It all happens automagically.
We don't need to configure caching.
It's going to cache the data for us by itself, and we'll see that very soon in action.
And it also helps us capture and handle errors from our API responses.
So we just add the middleware from our catalog API.
And all of that functionality comes from just not much code.
So now I've given all the big this is great.
Let's make sure it actually works.
So we're going to go to our catalog dot TSX.
What we have currently is a Useeffect that goes and fetches the data.
But we don't need this use effect anymore.
We also don't need the use states anymore.
Either we can remove these and what we're going to use instead is the hook that we created or was created
on our behalf, I should say.
And we're going to use this use fetch products query.
So back in the catalog we're going to say const and open curly brackets.
And then just say equals use fetch products query just like so.
And inside here we can get hold of the data.
And we can see that the data is a type of the product array or undefined.
And the reason it's either the product array or undefined is because this is asynchronous code.
It has to go out and fetch the data.
So for sure the initial value of the products or data is going to be undefined until such point as it's
not undefined of course.
So we'll use data.
But what we can also use inside here is we've also got these is is fetching is loading is success.
And we're going to utilize the is loading to tell us if we're actually loading or going out to get data
from our API.
And then we can use the or use a conditional.
And we can say if is loading before the return statement then we're going to return just for the short
term a div that says loading dot dot dot.
And then for the products we can pass down the data.
And what does this say.
Well it tells us that products is possibly undefined.
So just for the short term I'm just going to specify an Or condition inside or after the loading and
say if is loading or not products or not data, then return the loading div.
And then by the time we get to this return statement, well yes, we do have the data.
And then I can remove the unused imports from inside here to clean this up.
So we've removed a bunch of code.
And what we should have is the functionality that we're looking for.
So let's head over to our application.
And if we click on the application, what we should see is our list of products.
And it might have been quite quick, but there was a tiny bit of loading.
And we do see it on the left there we can see that the div for loading is being displayed.
Marvelous.
Let's take a look at another couple of things before we move forward.
Because if you recall from earlier on when we did check the network tab, we had two requests going
out to the API.
Because of the way the use effect works.
Well, we're not using a use effect anymore.
We're using RTK query for list functionality.
So if I refresh the page now, what we should find if we take a look for the products, then we're only
going to have a single request going to our API to go and get that data.
And that is indeed the case.
We can see that single request.
And if we go and take a look at Redux and let's see what's going on in the Redux world, because RTK
query is using our Redux store.
And if we take a look at the Redux dev tools, then we can see what's going on when we refresh the page.
So let's go ahead and refresh the page.
What we can see is our initial state in our application.
We can see that we've got our catalog API.
And if we take a look inside here, we've got quite a bit of functionality going on.
We can see what queries have been made, mutations provided, subscriptions.
Then we've got some config with various configuration values as well.
It then goes ahead after we've initialized our app and registers the middleware.
And then because we're on our catalog page, then it's going to execute the query to go and fetch products.
And we can see that query inside here.
And it's currently got a status of pending.
And it tells us the endpoint name, the request ID, the started timestamp etc..
And then once the products have been retrieved, then we get the execute query fulfilled.
And what we see inside our store is that we do have the data inside here of our products, and this
is stored in our global state.
And then we've got another Redux thing for these subscriptions updated inside here.
But this one here where we've got our products fulfilled.
Well that means that we now have our products in the global store.
What that would also mean is if I go to a product, then I see the loading.
If I go back to the catalog, I don't see the loading.
And if I go back to the same products I think was that same product or was that a different one?
In fact, we're not using RTK query for this, so I would expect to see that loading.
But when we go back to the catalog, we don't need to load it because it's already in memory.
It's already in a global state store.
So we have caching now as well enabled for our products without us needing to configure that.
And believe me, caching doing it manually is tedious and can be complex work to especially get it right.
So now we've made our first query.
What we'll take a look at next is take a look at what we're doing for the Use fetch product details.