How to POST single value as request body using axios instance

I have an POST API as:

• URL: /get-item
• Method: POST
• Request Body: id(Integer)

I know it's little weird to have a single value as request body instead of query or path parameter but it is what it is.

Now I am trying to call the API from my React App using below code.

export const axiosInstance = axios.create(AXIOS_BASE_CONFIG);
// ...

const loadMyItem = async (itemId) => {
    console.log("itemId:: ", itemId);
    setLoading(true);
    axiosInstance.post(
      URL_GetMyItem,
      itemId
    ).then((res) => {
      console.log("res", res);
      setMyItem(res?.result);
    }).catch((err) => {
      errorHandler(err);
    }).finally(() => {
      setLoading(false)
    })
  }

But getting Bad Request error.

Response:

{"timestamp":"...","status":400,"error":"Bad Request","path":"/.../get-item"}

How to call a POST API having single value as Request Body using axios?

By default, Axios will detect that your itemId payload is a primitive (string / number), stringify it and send it with content-type: application/x-www-form-urlencoded.

The issue there is that the stringified version of an integer is not a valid format for this header.

You will need to customise the content-type header and send the value as JSON

axiosInstance
  .post(URL_GetMyItem, JSON.stringify(itemId), {
    headers: {
      "content-type": "application/json",
    },
  })
  .then(({ data }) => {
    setMyItem(data.result);
  })
  .catch(errorHandler)
  .finally(() => {
    setLoading(false);
  });

An alternative I highly recommend is the Fetch API which isn't so opinionated and more stable

fetch(new URL(URL_GetMyItem, AXIOS_BASE_CONFIG.baseURL), {
  method: "POST",
  headers: {
    "content-type": "application/json",
  },
  body: JSON.stringify(itemId),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Request failed: ${URL_GetMyItem}`);
    }
    return response.json();
  })
  .then((data) => {
    setMyItem(data.result);
  })
  .catch(errorHandler)
  .finally(() => {
    setLoading(false);
  });