Okay, time to turn our attention back to the client now.
And we're going to create a type for our order.
So we might as well copy the order DTO that we get back from our API into our clipboard.
And we'll head across to the browser and let's go to one of those JSON to TS type sites.
And I'll just search for JSON to TTS and just pick the one I used before and paste in my order.
And this will give us our interfaces on the right hand side.
So I'll just copy that into my clipboard and head back to VS code and clear the stuff at the top and
inside the File Explorer.
Let's go and create inside the app folder and inside the models folder I'll create a new file and I'll
call it order TS.
And inside this file I'll just paste in what I have from my clipboard, and we'll just take a look at
what we've been given here from that site, so we can use an interface or a type.
I'm just not going to change it.
On this occasion.
I'll just use an interface for a change because why not?
It's going to do the same thing for us anyway, and just take a look at the properties we've been given.
This one looks fine.
The shipping address for line two.
We're going to make this optional and specify that this is a string.
The order item looks fine and the payment summary also looks fine as well.
Okay so that's our type.
And we'll create another type inside here.
And I'll stick with interface in this file.
And we'll call it create order as this is what we're going to use to send up our order to the API.
And we'll have a property for shipping address.
And that's going to be a type of shipping address.
And we'll also have a payment summary which is going to be a type of payment summary of course.
So we're going to create a new feature for our orders.
And inside the features folder let's create or right click and say new file and say orders forward slash.
And we're going to have an order API RTS.
So similar system to what we've used in our other features.
Each feature has its own little Redux RTK query type store.
And in here we will specify export const and use order API equals.
Create API and open parentheses and curly brackets will give it a reducer path of order API.
We'll use our base query and say base query with error handling, and we'll specify our endpoints and
in brackets we'll use builder and add the arrow open parentheses open curly brackets.
And then we can add our different endpoints.
So one of them will be to fetch the orders.
And we'll use Builder and Query.
And this is going to return to us an order.
And do be careful where you get this from.
We need to get this from the app models order because this is coming back from our own API and not stripe.
And that's going to be an order array.
And we're going to specify void for any query arguments which we do not need for this query.
And we'll open up parentheses curly brackets and we'll add query.
And this one's super simple.
All we need to do is specify orders as the API endpoints.
We'll also have a fetch order details and we'll use Builder and Query.
And inside here this is going to return to us an order.
And we do send up an argument which is going to be of type number for the order ID.
And then in here we can use query.
And in the arguments we'll use the ID and the arrow open parentheses, open curly brackets and then
just specify the URL.
And in backticks we'll specify orders forward slash dollar and then in curly brackets the id and then
we'll have the create order method.
So we'll use builder.
This is going to be a mutation.
And it's going to return to us an order.
And we're going to use the create order that we created as the query arguments.
And that will open up parentheses curly brackets.
And inside here we'll create our query which will take in the order as an argument.
We don't give it a type because we specified the type above just here.
And then we can use the URL of orders.
The method is going to be a post and the body is going to be the order.
So pretty straightforward this one.
There's nothing special we need to do here.
It's really just a case of defining our queries without any special updating or invalidation of cache.
And then below this we're just going to export Exports const and we'll have our usefetch.
And I'm not getting autocomplete here because I need to specify equals order API.
And then I should be able to use the autocomplete stuff.
And we're going to have a Usefetch orders query, a usefetch order detail query and a use create order
mutation from our order API.
And then we can go to our store and update that.
So our next step is the store TS.
And inside here we'll just add it underneath our other API like reducers.
We'll have our order API dot reducer, path colon and order API dot reducer.
And we'll just add it to the middleware.
So nothing new here really.
Just the process of setting up our store for what we are going to do.
And next we'll take a look at making use of this so that we can create the order in our checkout.