Internal server error 500 react post to firebase

Question

I'm getting a 500 error when posting to my firebase database. However, when I post via postman, it works fine, thus I'm having a lot of trouble debugging this. For the moment, I've hardcoded the categoryId and also the newRow , to make sure there wasn't a problem with my state somehow.

I think the handleSubmit is the only relevant function

  handleSubmit = (event) => {
    event.preventDefault();
    const categoryId = "1RegisterInfo";
    const newRow = {
      index: "3",
      body: "this.state.body",
      dataType: "this.state.dataType",
      visit: "test",
    };
    this.props.postRow(categoryId, { newRow });
  };

action

export const postRow = (categoryId, rowData) => (dispatch) => {
  dispatch({ type: "LOADING_UI" });
  axios
    .post(`/category/${categoryId}`, rowData)
    .then((res) => {
      dispatch({
        type: "POST_ROW",
        payload: res.data,
      });
      dispatch(clearErrors());
    })
    .catch((err) => {
      dispatch({
        type: "SET_ERRORS",
        payload: err.response.data,
      });
    });
};

cloud function

exports.postRow = (req, res) => {
  if (req.body.body.trim() === "") {
    return res.status(400).json({ comment: "Must not be empty" });
  }
  if (req.body.index.trim() === "") {
    return res.status(400).json({ comment: "Must not be empty" });
  }
  if (req.body.dataType.trim() === "") {
    return res.status(400).json({ comment: "Must not be empty" });
  }
  if (req.body.visit.trim() === "") {
    return res.status(400).json({ comment: "Must not be empty" });
  }

  const newRow = {
    index: req.body.index,
    dataType: req.body.dataType,
    visit: req.body.visit,
    body: req.body.body,
    createdAt: new Date().toISOString(),
    categoryId: req.params.categoryId,
    disapproveCount: 0,
    approveCount: 0,
  };

  db.doc(`/categories/${req.params.categoryId}`)
    .get()
    .then((doc) => {
      if (!doc.exists) {
        return res.status(404).json({ error: "Category not found" });
      }
    })
    .then(() => {
      return db.collection("rows").add(newRow);
    })
    .then(() => {
      res.json(newRow);
    })
    .catch((err) => {
      console.log(err);
      res.status(500).json({ error: "Something went wrong" });
    });
};

Any help appreciated!

Answer 1

You're not sending the right payload.

{ newRow }

is the same as

{
  newRow: {
    index: '3',
    body: this.state.body,
    dataType: this.state.dataType,
    visit: 'test',
  },
}

You're passing the above data in the request body and so req.body.body is undefined causing req.body.body.trim() to fail.

this.props.postRow(categoryId, { newRow })

should be

this.props.postRow(categoryId, newRow)

---

I would recommend using Joi or something similar to validate the request payload before trying to do any other operation.