node.js - node js req.body empty return

Question

i have very strange problem i already did some forms in same way and everythin working fine.. I will try to give u some code:

backend router js:

const express = require('express');
const { check } = require('express-validator');

const chatControllers = require('../controllers/chat-controllers');
const checkAuth = require('../middleware/check-auth');

const router = express.Router();

router.get('/', chatControllers.getChat);

router.use(checkAuth);

router.post(
  '/',
  [
    check('message')
      .not()
      .isEmpty()
  ],
  chatControllers.createChat
);

module.exports = router;

backend controller js:

const createChat = async (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return next(
      new HttpError('Invalid, please check your data.', 422)
    );
  }

  const { message } = req.body;

  const createdChat = new Chat({
    message,
    creator: req.userData.userId
  });

  let user;
  try {
    user = await User.findById(req.userData.userId);
  } catch (err) {
    const error = new HttpError(
      'Creating message failed, please try again.',
      500
    );
    return next(error);
  }

  if (!user) {
    const error = new HttpError('Could not find user for provided id.', 404);
    return next(error);
  }

  try {
    const sess = await mongoose.startSession();
    sess.startTransaction();
    await createdChat.save({ session: sess });
  } catch (err) {
    const error = new HttpError(
      'Creating message failed, please try again.',
      500
    );
    return next(error);
  }

  res.status(201).json({ chat: createdChat });
};

and frontend form:

const Chat = () => {
  const auth = useContext(AuthContext);
  const { isLoading, error, sendRequest, clearError } = useHttpClient();
  const [formState, inputHandler] = useForm(
    {
      message: {
        value: '',
        isValid: false
      }
    },
    false
  );


  const chatSubmitHandler = async event => {
    event.preventDefault();
    try {
      const formData = new FormData();
      formData.append('message', formState.inputs.message.value);
      await sendRequest('http://localhost:5000/api/chat', 'POST', formData, {
        Authorization: 'Bearer ' + auth.token
      });
    } catch (err) {}
  };

  return (
    <React.Fragment>
      <Helmet>
        <title></title>
      </Helmet>
      
      <ErrorModal error={error} onClear={clearError} />

      <div className="container">
      <h1>CHAT</h1>
      <form className="chat-form" onSubmit={chatSubmitHandler}>

        <Input
          id="message"
          element="input"
          type="text"
          label="Message"
          validators={[VALIDATOR_REQUIRE()]}
          errorText="Please enter message."
          onInput={inputHandler}
        />

        <Button type="submit" disabled={!formState.isValid}>
          SEND
        </Button>
      </form>

      <div className="chat-body overflow-auto">
        message body
      </div>

      </div>
    </React.Fragment>
  );
};

export default Chat;

In app js i already required routes for chat, and also i set headers and body parser but its very strange on others page everything working fine but here i cant retrive req.body...

@ i cant even process to form success error i get : Invalid, please check your data. I think its problem with this input when i console.log req i see theres req.body empty...

Answer 1

You need some kind of request payload parser middleware in your express server application. The parser actually parses the body and creates a property called body on the request object. Usually for APIs which take JSON as request body, we need to use bodyparser middleware like this:

import bodyParser from 'body-parser';

// And then
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

But if you want to use multipart form data, then you can use formidable as a middleware.