Axios PUT Verb And Why I Suck

So this is one of those posts where I had such a hard time I just wanted to document it so I would have a note for myself in the future.

Here's the issue I was having:

We have a project that uses React for the frontend and Azure Functions for the API. One of our Azure functions for submitting an order required, GET, PUT, POST, DELETE.

I got the function setup and all of the backend code was working using Postman to submit requests to the API.

When I started working on the front end everything was working except for the PUT verb.

The DELETE verb code looked like this:

const handleOrderDelete = async (orderId) => {
  const token = await getTokenSilently()
  var response = axios.delete(`http:localhost:3000/${orderId}`, {
      headers: {
          Authorization: `Bearer ${token}`,
          'content-type': 'application/json',
          'x-functions-key': "AZURE FUNCTION KEY HERE",
      },
  })
  if (response.statusCode === 200) {
      console.log(response)
  } else {
      console.error(response)
  }
}

The PUT verb code looked like this:

const handleOrderEdit = async (orderId) => {
  const token = await getTokenSilently()
  var response = axios.put(`http:localhost:3000/${orderId}`, {
      headers: {
          Authorization: `Bearer ${token}`,
          'content-type': 'application/json',
          'x-functions-key': "AZURE FUNCTION KEY HERE",
      },
  })
  if (response.statusCode === 200) {
      console.log(response)
  } else {
      console.error(response)
  }
}

Now at this point it's important to note that I copied the handleOrderEdit code from the handleOrderDelete code. They are VERY similar, the only main difference being the .put and .delete verbs themselves.

Now if you're astute and you are familiar with Axios you may already see the issue. If not see if you can figure it out.

So the DELETE was working, but when I ran the PUT I was getting a 401 on the Network tab in chrome devtools. In my C# console I was getting the error, NO TOKEN. ERROR.

When I looked at the request payload I saw that I had a token, "Bearer 8df7saf8d7sa8f9dsa7f89saf6798saf" or whatever. Most importantly my breakpoint I set in Visual Studio right on the opening bracket of the PUT method was not being hit.

I replaced the axios.put call with a fetch call since they use a similar API. I had narrowed my search down to some issue with axios at this point because it was working in Postman.

I added the fetch like so:

fetch(`http://localhost:3000/${orderId}`, {
            headers: {
                Authorization: `Bearer ${token}`,
                'content-type': 'application/json',
                'x-functions-key': 'AZURE FUNCTION KEY HERE',
            },
        })

and it worked just fine. I started looking a bit closer and I noticed something. When I submitted my request with axios the Bearer token was in the Payload, not in the Request Header. Hmm.

So, to make a long story short, (too late amirite???), I didn't realize that the PUT verb requires a body. We're not sending a body because all we're doing is setting the order back to a different status but we're using the PUT because all of the other verbs are being used.

Typically you would ALWAYS send a body with a PUT because you're updating a record and you need to send the information your replacing. Ours is a unique usecase and since we're sending the orderId in the url then we didn't need to send a body.

The code that fixed this whole thing is:

 const handleOrderSign = async (orderId) => {
        const token = await getTokenSilently()
        var response = axios.put(
            `${api.order.url}/${orderId}`,
            {orderId}, // < -- this
            {
                headers: {
                    Authorization: `Bearer ${token}`,
                    'content-type': 'application/json',
                    'x-functions-key': api.order.key,
                },
            }
        )
        if (response.statusCode === 200) {
            console.log(response)
        } else {
            console.error(response)
        }
    }

Even though I don't need to send a body I'm sending the orderId in the body just so I better conform to the axios standard.

So this is either one of those things that everyone knows and I'm just slow on the uptake, or this is something that happened because we're not using the tool the way it was intended, or it's a lack of documentation on axios' side.

Anyway,

Thanks for reading and that's all y'all.