Okay, now that we've got the API side of things settled, let's now move on to the client side.
And the first thing we'll do is we'll create a type, and we need to head back to the File Explorer
view inside here to deal with our client application.
So inside the client the source the app and the models folder.
Let's first of all create a type for our basket.
So I'll say new file and say baskets.
Let's go across to postman.
And we'll just go to our get basket method.
And let's just copy the JSON we have inside here so that we can quickly and easily create a type that
we need.
And we'll just head over to Chrome and use that JSON to TS site we used before, and just paste in the
basket JSON that we have and copy the type that it generates for us inside here and paste it into our
baskets.
So once again I'm just going to swap this for types because I kind of prefer them.
And I'm going to swap that for export type basket equals double check what we have for this.
And we've got a basket ID that's a string.
And the items which is an item array.
And they'll also swap this to type and say item equals.
And just double check what we've got for our different properties inside here.
And these all look fine to me.
So next we're going to go across and add a new feature into our client side application.
So inside the features I'm going to create a new file.
And inside here I'm going to say basket.
This is going to be the folder.
So I'll say forward slash.
And we're going to create the fetch request that we need first of all to go out and get things and update
things on our API.
So I'm going to call this basket API dot ts and press return.
And inside this file we can start creating the code that we need so that we can use RTK query to go
and get and update our basket.
So I'll specify export const basket API equals create Creates API that we get from the second option
here, the one with Redux toolkit, query, react, and then open parentheses, open curly brackets.
And the first part is the reducer path.
And I'll specify basket API here.
The next part is the base query we're going to use.
And we're going to use our base query with error handling.
Now that we've set that up.
And then we'll specify the endpoints.
And in here we open parentheses say builder as the arguments.
Then open up parentheses and curly brackets.
And we can define our different endpoints.
I'm going to have one for fetch baskets.
And we'll use builder dot query.
And this is going to return to us a basket.
And it doesn't take any arguments.
So we'll specify void open parentheses curly brackets.
And then we can define our query which is pretty simple for this one just empty parentheses.
And we're going to go to the basket endpoint.
The next one we need is the add basket item.
And this one will use builder.
And we're going to use the other option here.
This is a mutation.
We're changing the states so not a query.
This time we'll use mutation.
And inside here we need to specify what we're going to return from this.
We're going to get a basket back from our API.
So we'll use basket inside here.
And then we need to provide the parameters we're going to use for this.
Now there's two parameters.
There's the product ID and the quantity for this method.
So inside curly brackets because we need to specify this inside an object we'll specify the product
id which is a type of number.
And the quantity which is also a type of number.
And then to the right of the angle brackets we open up parentheses curly brackets.
And then we can define our query.
So slightly different this one because we do need to provide the parameters.
So inside parentheses and then curly brackets will specify the product ID and the quantity.
And then to the right of the parentheses we'll add the arrow.
Open up more parentheses more curly brackets.
And on the next line we can specify the URL.
So slightly different approach to this one because it's not just a simple query.
We need to send up parameters.
And it's not going to be a Get request which is the default when we use a query.
So we also need to specify the method that we're using inside here.
So we need to give it the full options for using a query here.
So we'll specify the URL as one of its properties and inside Backticks here because we need to send
up our product ID and quantity as query string parameters, we'll use Backticks and say baskets and
then question mark.
And then product id equals dollar.
And then we'll pass in the product ID and then we use an ampersand.
And then we'll specify quantity.
Equals.
And then again use dollar curly brackets and specify quantity.
Now this is an easy one to get wrong because there's a huge amount of opportunity to make typos inside
here.
So please do double check your work.
Any tiny little typo will cause this not to work as you expect it, so please double check your work
when using strings.
I know I've mentioned it before, but I do see many, many, many questions in the Q&A about simple
typos as they are a very easy way to introduce problems into what we're doing here.
And the method we're going to use is going to be a post which of course matches the endpoint on our
API controller.
We'll also add another method inside here to remove a basket item, and we'll specify builder and mutation
again.
And we don't get anything back from this method.
So we'll specify void and then in curly brackets we need the products ID which is a number, and the
quantity again which is a number.
And to write the angle bracket parentheses curly brackets.
And we'll add our query here very similar to the one we did above.
We need the product ID and the quantity as the arguments inside this object we'll add the arrow open
parentheses curly brackets, and then the URL we're going to specify here is going to be the same as
this.
So since I'm confident that I have this correct I'm also going to use that in list line to reduce the
possibility of making typos.
Or if I've made a typo in the one I've copied, I've doubled the opportunity to make typos.
And then the method is going to be delete in this one, just like so.
And then we will.
Below this we will export const and we'll use our equals basket API.
And just for now, we'll use the use Fetch basket query.
We'll come back and add the other ones we need when we need them.
But we're going to make use of this one early on and come back and talk about the mutation type of queries
soon.
So the next stop after our basket API we need to open up our store teams.
So let's open this.
And inside here just below the error API I'm going to add the basket API reducer path and to the right
of the square brackets I'm going to say basket API dot reducer.
And because this is an API type of Redux store thing, we need to add this to the middleware as well.
So I'm just going to drop that down because I'm going to start to go off the edge of the screen.
The more of these we add.
And below this one I'll specify basket API dot middleware.
Okay.
So that's our store functionality set up.
And the next thing we'll take a look at is creating our basket components.