Making POST request to SQL Server through React - node.js

Question

I am trying to make a simple textbox entry form for the user to type their first and last name, then click submit. I'd like the data to be updated in my SQL Server. Whenever I try to make a request I get the error
Unexpected token S in JSON at position 0
This is the code I am using:
server.js:
var express = require('express');
var app = express();
var sql = require("mssql");
var config = {
user: 'username',
password: 'password',
server: 'localhost',
database: 'Master'
};
app.post('/', function(req, res) {
res.set('Access-Control-Allow-Origin', '*');
var user = req.body;
var connection = new sql.ConnectionPool(config, function(err) {
var request = new sql.Request(connection);
request.query('INSERT INTO Persons SET ?', user);
});
res.end('Success');
});
app.listen(5000, () => {console.log('Server is running..')});
And here is the code from react:
import React, { Component } from 'react';
class postData extends Component {
constructor() {
super();
this.state = { user: {} };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('http://localhost:5000', {
method: 'POST',
data: {
FirstName: self.refs.FirstName,
LastName: self.refs.LastName
}
})
.then(function(response) {
//this is the line that is giving me the error
return response.json()
}).then(function(body) {
console.log(body);
});
}
render() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="First Name" ref="FirstName"/>
<input type="text" placeholder="Last Name" ref="LastName"/>
<input type="submit" />
</form>
);
}
}
export default postData;
I am getting the error from the react side. Not sure how to set this up. Any ideas where I might be screwing up? Thanks!!!

Answer 1

The data that your react app is passing to express is just the raw text. Try adding body-parser to your express app, and then deconstructing the values that are passed in. You could manually parse the body into JSON format, but it would be much easier to include body-parser. body-parser also allows you to parse the body of your request into other formats as well if you wish.
Add body-parser to your express app:
const bodyParser = require('body-parser');
app.use(bodyParser.json());
Then in your POST request, deconstruct the body like like this:
const { firstName, lastName } = req.body;
let connection = new sql.ConnectionPool(config, function(err) {
let request = new sql.Request(connection);
request.query(/* Your query to insert these values */);
});
res.end('Success');

Answer 2

Usually, you get that error because the response is a string instead of a JSON object. Try changing your express:
res.send({ message: 'Success'})
I'n not sure that you're using refs correctly either. I might try putting those values in state with an on change function:
handleChange = (e) => {
this.setState(
{
[e.target.name]: e.target.value
}
)
}
And change your inputs to:
<input type="text" placeholder="First Name" name="FirstName" onChange={this.handleChange}/>
Then in your submit function:
FirstName: this.state.FirstName
Hope that helps