Search code examples
node.jsrtk-query

trying to post form using RTK query to nodejs


trying to post to nodejs using RTK query mutation

   **endpoint nodejs i have posted using 
fetch(`const handleAddproduct=()=>{ 
 fetch('http://localhost:9000/api/v1/admin/product/new',{
   method:"POST",
  headers:{"Content-Type":"application/json"},
  body:JSON.stringify(newproduct)
}).then(()=>{
   console.log("new Product added")
 })
 }`*
but while using rtk mutation it's not post 
 const handleAddproduct=async()=>{
   await Addproductnew(createProduct).unwrap()
  .then((payload) => console.log('fulfilled', payload))
  .catch((error) => console.error('rejected', error))
}
  
 *export const productApi = createApi({
  tagTypes: ['Product'],
  reducerPath: 'productApi',
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:9000/"  }),
  endpoints: (builder) => ({
    getProduct: builder.query({query:(id)=>createRequest(`api/v1/product/${id}`)}),
    getAllProductsByName: builder.query({query:()=>createRequest(`api/v1/products`)}),
    getOrderAdminByName: builder.query({query:()=>createRequest(`api/v1/admin/orders`)}),
    // AddOrdernew:builder.mutation({query:()=>createProductpost(`api/v1/order/new` )}),
    // Addproductnew:builder.mutation({query:()=>createProductpost(`api/v1/admin/product/new`)}),
    Addproductnew: builder.mutation({
            query: newproductid => ({
                url: 'api/v1/admin/product/new',
                method: 'POST',
                body: {newproductid}    
            }),
        }),
  }),
})***
  


Solution

  • import from service mutation and createProduct in array wouldn't read it as a function    
    
    const [createProduct]  =useCreateProductMutation();
    
    form in homepage 
    <form onSubmit={() => {createProduct(newProduct)}}>
    {/* <form onSubmit={() => {createProduct(newProduct)}}> */}
    <input type="text" value={title} placeholder="title" onChange={(e)=>settitle(e.target.value)}/>
    <br/>
    <input  type="text" value={desc} placeholder="desc" onChange={(e)=>setdesc(e.target.value)}/>
    <br/>
    <input type="text"  value={img} placeholder="img" onChange={(e)=>setimg(e.target.value)}/>
    <br/>
    <input type="number" value={size} placeholder="size" onChange={(e)=>setsize(e.target.value)}/>
    <br/>
    <input type="text"  value={color} placeholder="color" onChange={(e)=>setcolor(e.target.value)}/>
    <br/>
    <input type="text"  value={category} placeholder="category" onChange={(e)=>setcategory(e.target.value)}/>
    <br/>
    <input type="number" value={price} placeholder="price" onChange={(e)=>setprice(e.target.value)}/>
    <br/>
    <input type="submit" />
    </form>
    
    
    service RTK query folder 
    export const productApi = createApi({
    //   tagTypes: ['Product'],
      reducerPath: 'productApi',
        tagTypes: ['Post'],
      baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:9000/"  }),
      endpoints: (builder) => ({
        getProduct: builder.query({query:(id)=>createRequest(`api/v1/product/${id}`)}),
        getAllProductsByName: builder.query({query:()=>createRequest(`api/v1/products`)}),
        getOrderAdminByName: builder.query({query:()=>createRequest(`api/v1/admin/orders`)}),
        // AddOrdernew:builder.mutation({query:()=>createProductpost(`api/v1/order/new` )}),
        // Addproductnew:builder.mutation({query:()=>createProductpost(`api/v1/admin/product/new`)}),
    
       createProduct: builder.mutation({
       query: (newProduct) => {
        console.log("Create Product:", newProduct)
        return {
         url: `api/v1/admin/product/new`,
         method: 'POST',
         body: newProduct,
         headers: {
          'Content-type': 'application/json; charset=UTF-8',
         }
        }
       }
      }),