Failed to Fetch using Knex JS in in React App - reactjs

Question

I have a component with a checkbox that I'm keeping track of through a localhost db using postgres. When i check the checkboxes, a row is inserted into the table netowrkusers with the login user id in the id column, and the id of the user that was checked in the connections column. It removes the row when unchecked. It seems to work intermittently-but I keep getting a 'failed to fetch' error, and eventually the database doesn't keep proper track of the checked and unchecked boxes. Could someone that knows Knex see if there is a flaw in the code? Here is the Knex.js code I'm using.
app.post("/cb", (req, res) => {
const { loginuser, userid, ischecked } = req.body;
if (ischecked) {
console.log("flag is true");
db.transaction(trx => {
trx
.insert({
id: loginuser,
connections: userid
})
.into("networkusers")
.returning("id", "connections")
.then(() => {
console.log("committing");
trx.commit();
})
.catch(error => {
console.log("error", error);
trx.rollback();
});
}).catch(err => res.status(400).json(err));
} else {
console.log("flag is false");
db.transaction(trx => {
db("networkusers")
.where("id", "=", loginuser)
.andWhere("connections", "=", userid)
.del()
.returning("id", "connections")
.then(() => {
console.log("committing");
console.log(loginuser,userid)
trx.commit();
})
.catch(error => {
console.log("error", error);
trx.rollback();
});
}).catch(err => res.status(400).json(err));
}
});
And here is the components that have the checkbox logic:
import React, { useState } from "react";
const onUpdateCB = (ischecked, loginuser, userid, setisChecked,handleCheck) => {
console.log(ischecked, loginuser, userid);
fetch('http://localhost:3000/cb', {
method: 'post',
headers: {'Content-Type':'application/json'},
body:JSON.stringify({
loginuser,
userid,
ischecked: ischecked
})
}).then(setisChecked(ischecked));
return
};
const Card = props => {
const [isChecked, setisChecked] = useState(props.ischecked);
return (
<div
className="pointer bg-light-green dib br3 pa3 ma2 shadow-5"
onClick={() => props.handleClick(props.id)}
>
<div>
<h3>{props.name}</h3>
<p>{props.company}</p>
<p>{props.phone}</p>
<p>{props.email}</p>
<p>{props.city}</p>
</div>
<div>
My Network
<input
className="largeCheckbox"
type="checkbox"
checked={isChecked}
onChange={() =>
onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,props.handleCheck)
}
/>
</div>
</div>
);
};
export default Card;
NetworkArray component:
import React from "react";
import Card from "./Card";
const NetworkArray = ({
network,
networkusers,
handleChange,
handleClick,
loginuser
}) => {
console.log("in network array", networkusers);
const cardComponent = network.map((user, i) => {
const ischecked = networkusers.filter(n => {
var nw = n.id === loginuser.id && n.connections === network[i].id;
return nw;
});
console.log("is it checked", ischecked);
return (
<Card
key={network[i].id}
name={network[i].firstname + " " + network[i].lastname}
company={network[i].company}
phone={network[i].phone}
email={network[i].email}
city={network[i].city}
ischecked={ischecked.length}
handleChange={handleChange}
handleClick={handleClick}
id={network[i].id}
loginuser={loginuser}
/>
);
});
return <div>{cardComponent}</div>;
};
export default NetworkArray;

Answer 1

This doesn't look quite right:
db.transaction(trx => {
db("networkusers")
.where("id", "=", loginuser)
Normally you'd do:
db.transaction(trx => {
trx("networkusers")
.where("id", "=", loginuser)
or:
db.transaction(trx => {
db("networkusers")
.where("id", "=", loginuser)
.transacting(trx)
I suspect the issue is you're just not using the transaction object consistently. See overview.
You should also respond after your database operation succeeds (not just when it fails). So something like:
db
.transaction(trx => {
// ...query...
})
.then(() => res.json({ message: 'Success.' }))
.catch(err => res.status(400).json(err));