I have been using RTK Query
for a while now and this is the first time I see this, I am trying to edit a product however I cannot seem to be able to hit the correct url:
RTK Query:
editProduct: builder.mutation({
query: (data) => ({
url: `/api/products/${data.id}`,
method: "PUT",
body: data,
}),
invalidatesTags: ["Products"],
}),
For some reason I keep hitting http://localhost:5173/api/products/undefined
even though I can see the id is correct, like so:
const formDataToSend = new FormData();
formDataToSend.append("id", formData.id);
formDataToSend.append("name", formData.name);
formDataToSend.append("description", formData.description);
formDataToSend.append("price", formData.price);
formDataToSend.append("category", formData.category);
formDataToSend.append("image", formData.image);
formDataToSend.append("productImage", formData.productImage);
console.log("formDataToSend:");
for (const [key, value] of formDataToSend.entries()) {
console.log(`${key}:`, value);
}
try {
await editProduct(formDataToSend).unwrap();
toast.success("Product edited successfully");
navigate("/admin/products");
} catch (error) {
console.log(error);
toast.error(error.data.message);
}
I do get all the values console.logged
, i.e.:
formDataToSend:
AdminEditProduct.jsx:131 id: 663a714dd1b42a513610044d
AdminEditProduct.jsx:131 name: White shirt
AdminEditProduct.jsx:131 description: Elevate your wardrobe with our classic white shirts, a timeless essential for every modern wardrobe. Crafted from premium materials, our white shirts offer crisp elegance and versatility for any occasion. From boardroom meetings to casual outings, these shirts exude effortless sophistication and style. Discover the perfect balance of comfort and refinement with our collection of white shirts, designed to elevate your look with every wear.
AdminEditProduct.jsx:131 price: 6.99
AdminEditProduct.jsx:131 category: shirts
AdminEditProduct.jsx:131 image: null
AdminEditProduct.jsx:131 productImage: noimage.png
But always id
is undefined
, even though you can clearly see the id in the log, so I get this error from server:
PUT http://localhost:5173/api/products/undefined 500 (Internal Server Error)
This code is very similar to the one I am using when adding a product which works fine, but for some reason now when editing the data sent isn’t being recognized.