Sending data on submit using POST request to API with React, Express, and NodeJS

Question

I am trying to send data from my client application to my API using a fetch POST request. The stack I am using is React, Express, NodeJS, and MySQL. I have verified that using sample data directly in express will insert the data into the database. However my client POST request doesn't seem to work. Here is the code that is triggered when the user clicks submit (React)

    handleSubmit(){
        var data = {
            //Production data
            
            // gameTypeID : this.state.gameTypeID,
            // gameHostID : this.state.gameHostID,
            // buyInAmount : this.state.monBuyInAmount,
            // earningSystem : this.state.earningSystemID,
            // customCode : this.state.customCode,
            // gameStatus : 1,
            // mapID : this.state.MapID

            //Sample data
            gameTypeID : 1,
            gameHostID : 1,
            buyInAmount : 3,
            earningSystem : 1,
            customCode : '',
            gameStatus : 1,
            mapID : 2
        }

        fetch('https://localhost:3001/game', {
            method: 'post',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({data})
            }).then(function(response) {
                return response.json()
            }).catch(error=>console.log(error))
    }

Below is the express route file that handles the API request. I have tested this with the same sample data directly in the file and it works fine.

function create_game(req,res) {
    pool.getConnection(function(err, connection){
        if(err) {
            connection.release();
            res.json({"code": 100, "status": "Error in database connection"});
            return;
        }

        let sql ="INSERT INTO games (intGameTypeID, intGameHostID, monBuyInAmount, intEarningSystemID, strCustomCode, intGameStatusID, intMapID) VALUES (?, ?, ?, ?, ?, ?, ?) ";
        let gameType = request.body.gameTypeID;
        let gameHost = request.body.gameHostID;
        let buyIn = request.body.buyInAmount;
        let earningSystemID = request.body.earningSystem;
        let customCode = request.body.customCode;
        let gameStatus = request.body.gameStatus;
        let mapID= request.body.mapID

        let values = [gameType, gameHost, buyIn, earningSystemID, customCode, gameStatus, mapID];

        console.log("connected as id '" + connection.threadId);
        console.log("here")
        connection.query(sql, values, function(err, result, fields) {
            connection.release();
            if(!err) {
                console.log(result);
            }else console.log(err);
        });    
  
        connection.on('error', function(err){
            res.json({"code": 100, "status": "Error in database connection"});
        })
    })
};




router.post('/create', function(req, res){
    create_game(req, res);
});

any error are you getting? – Sandeep Patel Jan 02 '20 at 18:32 — Sandeep Patel, Jan 02 '20 at 18:32
None that I have been able to catch. – Justin Wade Jan 02 '20 at 18:35 — Justin Wade, Jan 02 '20 at 18:35

score 0 · Answer 1 · answered Jan 02 '20 at 18:48

You have to enable CORS to allow the external request and also you have to use JSON in the backend side

const cors = require('cors')
const { json } = require('body-parser')

const app = express()

app.use(cors())
app.use(json())

and also please share the errors or logs

score 0 · Answer 2 · answered Jan 02 '20 at 19:37

In your function create_game(req,res) you declare the parameters as req and res. Inside the function you use request.

let gameType = request.body.gameTypeID;
let gameHost = request.body.gameHostID;
let buyIn = request.body.buyInAmount;
let earningSystemID = request.body.earningSystem;
let customCode = request.body.customCode;
let gameStatus = request.body.gameStatus;
let mapID= request.body.mapID

Sending data on submit using POST request to API with React, Express, and NodeJS

2 Answers2