Okay, now that we've got our create and edit form created, we can now look at hooking this up to our
API.
We've still got stuff to clean up.
If you come into the create and you see preview of image.
Sure.
That's something that needs to be corrected inside here because that's a hangover from what we've done.
But we haven't finished our work yet, so we'll clean this up as well as we take a look at what we're
going to do next.
So we need the ability to query our API so that we can either update or create.
And we'll need to think about deleting a product from our API back end.
So we'll head back to VS code.
And this clean things up at the top.
And inside our admin folder in the features folder we'll create a new file and we'll call it admin API
ts.
And inside here we'll follow a similar path that we did for other RK query stores as well.
So we'll specify export const and we'll call it admin API equals create API, which we get from Redux,
toolkit, query, react, and then we open parentheses and then curly brackets.
And we'll specify the reducer path in here as admin API.
We'll have a base query.
Again we'll use our base query with error handling.
And we'll create our endpoints.
And in parentheses we specify builder.
And to the right we'll add the arrow.
Open parentheses open curly brackets.
And then inside here we can specify our endpoints.
So I'm going to have one for creating a product.
So create product and we'll use builder and mutation.
And we'll use products.
And we'll use our create product schema as what we're passing as parameters for lists.
And then we specify the query.
And we'll specify data as a type of create product schema.
And the arrow and open curly brackets, and then we will return more curly brackets.
And the URL is going to be products.
The method will be a post and the body will specify the data inside there.
And below this one we will have an update product.
And for this we'll use builder dot mutation.
And the square brackets will specify void.
And then for the parameters for this one for the void is for what we're getting back the result type.
And of course for an update we don't get anything back for the parameters for this.
This needs the ID as well as the data from the form as well.
So we're going to specify ID as a number.
And then the data is going to be the create product schema.
And then we'll open parentheses after the angle bracket curly brackets.
And then we'll have our query and in parentheses more curly brackets will destructure the ID and the
data.
And we'll add an arrow, open more curly brackets and we will return.
And for the URL this is going to be products as well.
And the method is going to be a puts.
And then for the body we need both the data which is coming back from our create product schema.
We're not using a different schema for the update.
And our create product schema contains the name, description, price, so on and so forth.
But we also need to include the ID with this, because that's how we're telling our API that we're going
to receive this data with an ID inside here as well.
So for the body we'll just send this up as an object.
But we'll combine the data and the ID.
So we'll use the spread operator and specify data.
And then we'll append on effectively the ID as well for the body of this Request.
And then we can export our two methods here.
So I'm going to say export const and we'll have use create.
And I'll just use the equals admin API first.
So I get some autocompletion help and we'll use the use create product mutation and the use update product
mutation here as well.
And then we can head over to our stores as we need to update that.
And inside here we'll just add another one of these API type reducers.
And I'll use admin API dot reducer path.
And to the right of the square brackets I'll specify admin API dot reducer.
And then because it's an API type of redux thing, we also need to add the middleware as well.
So I'll just say admin API dot middleware.
And while it's fresh in my mind, let's go and take a look at the issue with the picture inside our
form as well, because we've got this preview of an image when there's clearly not an image available.
Hence the reason we're not seeing the image.
And if we go back and take a look at our product form, let's address this right now.
Otherwise I'm prone to forget.
And inside here where we've got our watch file, this is the reason for displaying something even when
nothing is available.
Now I'm going to apply the fix to this, but you might want to pause the video and see if you can resolve
this particular problem yourselves.
Or I'm just going to demonstrate the fix for this myself now.
Now the problem is the reason for this is we're just checking to see if the watch file exists, and
if it does, we showed a preview.
And if it doesn't, then we've got the image tag here.
And we're optionally displaying the picture URL.
So if we don't have the watch file then this code is executed.
But if we don't have a picture URL either we're not not displaying the image tag.
We still are.
But the problem is that there isn't a picture to show, so we just see the what appears like an error
loading the image in our browser.
So two correct lists.
Then we just need an additional check.
So for this watch file I'm specifically going to look for the preview.
And if it is available then we display this image tag.
And to the right of this colon we'll do another check.
And we're going to check for the products dot picture URL.
Add another question mark.
And if we do have the product picture URL then we display this image tag.
And if we have neither then we're just going to return null instead of displaying an image tag at all.
And this should have the correct result of fixing that particular problem.
Now we don't see the error inside our browser and that solves that little problem.
So now we have our admin API set up.
Next we'll take a look at how we hook all of this in with our form submission and sending this data
up to the API.