CODEWITHSUNDEEP
reactjsaxiosnestjspatch
oykn
oykn

Reputation: 190

How to make a PATCH request in ReactJS ? (with Nestjs)

nestjs controller.ts

   @Patch(':id')
    async updateProduct(
      @Param('id') addrId: string,
      @Body('billingAddr') addrBilling: boolean,
      @Body('shippingAddr') addrShipping: boolean,
    ) {
      await this.addrService.updateProduct(addrId, addrBilling, addrShipping);
      return null;
    }

nestjs service.ts

 async updateProduct(
    addressId: string,
    addrBilling: boolean,
    addrShipping: boolean,

  ) {
    const updatedProduct = await this.findAddress(addressId);
    if (addrBilling) {
      updatedProduct.billingAddr = addrBilling;
    }
    if (addrShipping) {
      updatedProduct.shippingAddr = addrShipping;
    }
    updatedProduct.save();
  }

there is no problem here. I can patch in localhost:8000/address/addressid in postman and change billingAddr to true or false.the backend is working properly. how can i call react with axios?

page.js

    const ChangeBillingAddress = async (param,param2) => {
        try {
            await authService.setBilling(param,param2).then(
                () => {
                    window.location.reload();
                },
                (error) => {
                    console.log(error);
                }
            );
        }
        catch (err) {
            console.log(err);
        }
    }
return....
     <Button size='sm' variant={data.billingAddr === true ? ("outline-secondary") : ("info")} onClick={() => ChangeBillingAddress (data._id,data.billingAddr)}>

auth.service.js

const setBilling = async (param,param2) => {
   let adressid = `${param}`;
   const url = `http://localhost:8001/address/`+ adressid ;
   return axios.patch(url,param, param2).then((response) => {
      if (response.data.token) {
         localStorage.setItem("user", JSON.stringify(response.data));
      }
      return response.data;
   })
}

I have to make sure the parameters are the billlingddress field and change it to true. I can't make any changes when react button click

Upvotes: 0

Views: 4106

Answers (2)

oykn
oykn

Reputation: 190

now it worked correctly

   @Patch('/:id')
    async updateProduct(
      @Param('id') addrId: string,
      @Body('billingAddr') addrBilling: boolean,
    ) {
      await this.addrService.updateProduct(addrId, addrBilling);
      return null;
    }


const ChangeBillingAddress = async (param) => {

    try {
        await authService.setBilling(param,true).then(
            () => {
                window.location.reload();
            },
            (error) => {
                console.log(error);
            }
        );
    }
    catch (err) {
        console.log(err);
    }
}


const setBilling= async (param,param2) => {
   let id = `${param}`;
   const url = `http://localhost:8001/address/`+ id;
   return axios.patch(url,{billingAddr: param2}).then((response) => {
      if (response.data.token) {
         localStorage.setItem("user", JSON.stringify(response.data));
      }
      return response.data;
   })
}

Upvotes: 0

Enfield Li
Enfield Li

Reputation: 2530

Since patch method is working fine in postman, and server is also working fine, here's a tip for frontend debugging

Hard code url id and replace param with hard coded values too:

const setBilling = async (param,param2) => {
   // let adressid = `${param}`;
   const url = `http://localhost:8001/address/123`; // hard code a addressid 

   return axios.patch(url,param, param2).then((response) => { // hard code params too
      console.log(response); // see console result

      if (response.data.token) {
         // localStorage.setItem("user", JSON.stringify(response.data));
      }

      // return response.data;
   })
}

Upvotes: 1

Related Questions