Question 118251 in Mongodb Question posted in
The official documentation can be found here.

How to connect backend create user function to front end (Node.js, React.js, MongoDB)

I am struggling in figuring out how to have a front-end that corresponds to my back-end in creating a user. I’ve successfully managed to create a user (can post to MongoDB using Insomnia) but don’t know what’s the structure for creating a user in the front end. Here’s what my code looks like:

Router

const express = require('express');
const router = express.Router();

router.post('/', async (req, res) => {
    // First Validate The Request
    const { error } = validate(req.body);
    if (error) {
        return res.status(400).send(error.details[0].message);
    }

    // Check if this user already exisits
    let user = await User.findOne({ email: req.body.email });
    if (user) {
        return res.status(400).send('That user already exisits!');
    } else {
        // Insert the new user if they do not exist yet
        user = new User({
            name: req.body.name,
            email: req.body.email,
            password: req.body.password
        });
        await user.save();
        res.send(user);
    }
});

module.exports = router;

server.js

app.use('/api/users', users);

Tags:

4

Answers


  1. 0

    Post request to this the API:

    import axios from 'axios'

axios({
  method: 'post',
  url: '/api/users',
  data: {
    name: 'John',
    email: '[email protected]',
    password: 'Something'
  }
});
    Login or Signup to reply.
  2. 0

    You can use axios for example, an popular library: https://github.com/axios/axios

    axios.post("URL", { email: "[email protected]" })

    Login or Signup to reply.
  3. 0

    What you should do, is store information the user types in your frontend in a variable and pass this data to the fetch’s function via the post method.

    // User information
let username = 'boneless';

// Options for your request
let options = { method: 'POST', body: JSON.stringify({username: username});

let request = await fetch('url', { options });

let response = await request;

// Now you can apply logic to your response. Based on how your server replies.

    I recommend reading up on fetch, as it’s native in most browsers.

    Login or Signup to reply.
  4. 0

    You need to send POST request to the server (API ENDPOINT URL) from your frontend (react), you can achieve this using fetch api or axios

    using fetch api (example) –

    function createUser(userData) {
   try {
      const response = await fetch('API_ENDPOINT_URL', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(userData)
      })
      return response.json()
   }
   catch(error) {
     // handle error 
   }
}

    using axios – (example)

    function createUser(userData) {
   axios.post('API_ENDPOINT_URL', userData)
      .then((response)=> {
         return response.json()
      })
      .catch((error)=>{
         // handle error
      })
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search