How to send multiple requests with Axios? - mysql

Question

I'm working on a react registration form which contain some fields (idStudent(primary key & auto increment), first name, last name, ....., faculty, prerequisites), I'm using Formik & yup for validation.
Later on, I have to link my app with a recommendation system (recommend a final year project to students) based on prerequisites and the obtained grades in some subjects.
At first, I used just one table to store the data coming from the form in frontend,
student(firstname, lastname, ... ,prerequisites)
A student can select prerequisites from a react select that contain prerequisites according to the faculty (example : if a student study computer science, the react select will show only computer science prerequisites like react, angular, machine-learning ....).
Taking into consideration a student can have multiple prerequisites, so the prerequisites column in students table will contain multiple id's of the selected prerequisites,
The prerequisites are stored in an other table in my database ( prerequisites(idFaculty, idPrerequisites, prerequisite) )
I know that I can store multiple id's in one column using a JSON file but after some researches here on Stackoverflow in some previous posts, I found that it's difficult to deal with JSON especially if I want to update a column.
So I created another table to store the selected prerequisites by a student when registering
(studentPrerequisites(idStd (foreign key reference to idStudent from students table), idPrerequisite(foreign key reference to idPrerequisites from Prerequisites table))
The problem I'm facing is how to send two post's requests via axios, taking into
consideration that maybe I should use a loop to store multiple rows in case a student select multiple Prerequisites.
This is what I did :
My backend file
app.post("/registerStudent", (req, res) => {
const faculty = req.body.faculty;
const firstName = req.body.firstName;
const lastName = req.body.lastName;
const phone = req.body.phone;
const email = req.body.email;
const password = req.body.password;
db.query(
"INSERT INTO students (email, password, firstName, lastName, faculty, phone) VALUES (?,?,?,?,?,?)",
[email, password, firstName, lastName, filiere, phone],
(err, result) => {
if (err) {
console.log(err);
} else {
// store chosen prerequisites
//result.insertId is the current idStudent of the student who registering
const idStd = result.insertId;
const idPrerequisite = req.body.idprerequis;
db.query(
"INSERT INTO studentPrerequisites (idStd, idPrerequisite) VALUES (?,?)",
[idFiliere, idPrerequisite],
(err, result) => {
if (err) {
console.log(err);
} else {
res.send("Values Inserted");
}
}
);
}
}
);
});
My frontend code
const onSubmit = (values, actions) => {
Axios.post("http://localhost:3001/registerStudent", {
faculty: values.faculty,
firstName: values.firstName,
lastName: values.lastName,
phone: values.phone,
email: values.email,
password: values.password,
})
.then(() => {
//preId is an array that contains the selected prerequisites(id's) from react select
//I try to use a for loop to store multiple of prerequisites dynamically in case a
//student select multiple prerequisites
for (let i = 0; i < preId.length; i++) {
idPrerequisites: preId[i],
}
})
.then(() => {
console.log("success!");
});
actions.resetForm();
};

Answer 1

It might be best to let the backend handle multiple prereqs by passing in an array of prereqs to your request. I'd also use Knex and async/await to avoid a lot of .then chaining and to make use of transactions. Transactions will revert all queries if any errors occur within the transaction. Knex also makes querying databases super easy with built-in methods instead of writing raw SQL. You should also be using object destructuring instead of doing firstName = req.body.firstName, lastName = req.body.lastName, etc. You can learn more about knex and getting your db connected to it here: https://knexjs.org/guide/#node-js
Also, WHY ARE YOU NOT HASHING YOUR PASSWORDS? That is the most basic security you should be doing at a minimum!