CODEWITHSUNDEEP
reactjsreact-reduxaxios
ganesh kaspate
ganesh kaspate

Reputation: 2685

Axios delete request is not taking the body data

I am new to the react redux. Here I have a delete request

export const deleterequest = (url, jdId) =>
    axios.delete(
        url,
        jdId,
        {
            headers: {
                "Authorization": localStorage.getItem("access_token") !== null ? `Bearer ` + localStorage.getItem("access_token") : null,
                "Content-Type": "application/json"
            }
        }
    ).then(data => {
        if (data.status === HttpStatus.OK) {
            return {
                status: data.status,
                payload: data.data
            };
        }
    }).catch(err => {
        return {
            status: err.response ? err.response.data : 'Network error',
            payload: null
        };

So, I tried with this apporch. jdId is an array of strings. So, But when I am using in this way then my request header does not show this data.

So, what is that I am doing wrong. Can any one help me with this ?

Upvotes: 7

Views: 20566

Answers (8)

ahmed ali
ahmed ali

Reputation: 11

You can use patch to delete.

#frontend

export const DeleteAdminHallByID = async (id, public_id) => {
  return await axios.patch(`http://localhost:5000/api/v1/hall/hall/${id}`, { public_id }, config);
};

#Route folder In nodejs

router.route('/hall/:id').patch(auth, authAdmin, deleteHall);

const deleteHall = async (req, res) => {
  try {
    const { public_id } = req.body;
    const { id } = req.params;

    const hall = await Hall.findByIdAndDelete(id);
    if (!hall) return res.status(500).json({ msg: 'There Is No hall With This ID' });
    console.log('done 2');
    res.status(200).json({ msg: 'Hall Deleted..' });
  } catch (error) {
    return res.status(500).json({ msg: error.message });
  }
};

Upvotes: 0

Michael Jay
Michael Jay

Reputation: 593

I'm using Axios v 0. I couldn't get their delete method to work, even when writing the config object as I was supposed to.

The only thing that worked for me (in 2022) is to just use the plain axios object and define the method, like this:

await axios({
  method: 'DELETE',
  url: 'yoururlhere.com',
  data: {foo: 'bar'},
  headers: {h1: val, ...}
})

Upvotes: 2

Carlos Daniel
Carlos Daniel

Reputation: 91

axios.delete(url, {headers: {}, data: {}})

I think this will work

Upvotes: 3

Codemaker2015
Codemaker2015

Reputation: 1

Try like this,

in react js,

deleteData = (question) => {
    if (question !== "") {
        const url = "http://localhost:3001/questions/delete-question/" + question

        const headers = {
            "Content-Type": "application/json"
        }

        axios.delete(url, {data: question}, headers)
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
    }
}

in backend,

router.delete('/delete-question/:question', (req, res) => {
    questions.deleteQuestion(req.params.question)
        .then(response => {
            res.status(200).send(response);
        })
        .catch(error => {
            res.status(500).send(error);
        })
})


const deleteQuestion = (question) => {
  return new Promise(function(resolve, reject) { 
    pool.query(`DELETE FROM ${QUESTIONS_TABLE} WHERE question = $1`, [question], (error, results) => {
      if (error) {
        reject(error)
      }
      resolve({
        status: 'success',
        message: 'Question deleted'
      })
    })
  })
}

Ensure that the axios parameters should be in the format of axios.delete(url, {data: question}, headers) {} bracket for data is important.

then the api url should be like this /delete-question/:question and

access it from the front end like this "http://localhost:3001/questions/delete-question/" + question

Upvotes: 1

Gray
Gray

Reputation: 579

i had the same problem with version 0.20.0 and after upgrading to 0.21.0 problem was solved

Upvotes: 7

Diego Fortes
Diego Fortes

Reputation: 9790

In my case I had to pass an object to the data, otherwise it would not work at all.

Wrong:

axios.delete(url, {
          data: '123',
        });

Correct:

axios.delete(url, {
          data: { data: "123" },
        });

Upvotes: 10

Arghyadeb
Arghyadeb

Reputation: 478

Axios supports sending a body in a delete request. In that case you'll have to send it in the format:

axios.delete(
    url,
    {
        data: { jdId }, // or data: jdId, depending on how you handle it in the back end
        headers: {
            "Authorization": localStorage.getItem("access_token") !== null ? `Bearer ` + localStorage.getItem("access_token") : null,
            "Content-Type": "application/json"
        }
    }
)
.then(data => { 
    // rest of your code 
})
.catch(err => { 
    // handle error 
})

Axios expects only one config object in delete request. (See here: https://github.com/axios/axios#axiosdeleteurl-config) The config is expected to have two optional keys, viz. data and headers. The data is nothing but the request body.

Hope this helps you.

Upvotes: 4

Prabhu
Prabhu

Reputation: 1057

delete requests with a body need it to be set under a data key

export const deleterequest = (url, jdId) =>
    axios.delete(
        url,
        { data: jdId },
        {
            headers: {
                "Authorization": localStorage.getItem("access_token") !== null ? `Bearer ` + localStorage.getItem("access_token") : null,
                "Content-Type": "application/json"
            }
        }
    ).then(data => {
        if (data.status === HttpStatus.OK) {
            return {
                status: data.status,
                payload: data.data
            };
        }
    }).catch(err => {
        return {
            status: err.response ? err.response.data : 'Network error',
            payload: null
 };

Upvotes: 14

Related Questions