To give you some context:
I am trying to implement a simple Crud with a Client/Server architecture.
While doing so I tried making a multi-step form, since alot of the forms became quite long,
But, I soon realized error checking while having a multistep form was harder than a simple onepage form.
In order to check if the Unique values of the form were indeed unused in the DB I created a react-query that will check it for me and display a message if the return message was false, meaning there is a duplicate in the DB.
As I was trying to implement said API endpoint I ran into a curious Error:
The value that is being send into the backend is a json that contains values suchs as:
{“name”: “”xValue””}
Which completely crashes my backend.
I could probably try to do some string manipulation to “clean up” the string before turning it into a json and sending it back to the backend.
But I figured before I patch my error up I should probably address the real problem:
The way I am capturing the value. I think…
These are some of the relevant code that I used for this “Unique Checking”
//useState that will hold the value:
const [carnetValue, setCarnetValue] = useState('');
//React Query and onChange reaction function:
const { data: isUnique } = useQuery(["checkCarnet", carnetValue], () => apiClient.checkCarnet(carnetValue), {
enabled: !!carnetValue
});
const handleChange = (value: string) => {
setCarnetValue(value);
}
//The input itself:
<input
type="text"
className="border border-blue-500 w-full py-1 px-2 font-normal"
{...register("carnet", { required: "Este campo es necesario", onChange: e => handleChange(e.target.value) })}
/>
//The API Client:
export const checkCarnet = async (carnet: string): Promise<RevisarDato> => {
console.log(carnet);
const response = await fetch(`${BASE_API_URL}/api/auth/check-carnet`, {
method: "POST",
body: JSON.stringify(carnet),
headers: {
"Content-type": "application/json",
},
});
if (!response.ok) {
throw new Error("Something went wrong");
}
const returnData = await response.json();
return returnData;
};
// In case necessary or relevant this is the Backend Endpoint
export const checkCarnet = async (req: Request, res: Response) => {
const { carnet } = req.body;
try {
const yaExiste = await pool.query(
"SELECT * FROM Personas WHERE carnet = $1",
[carnet]
);
if (yaExiste.rows.length != 0) {
return res.status(400).json({ result: false });
}
return res.status(200).json({ message: true });
} catch (error) {
console.log(error);
res.status(500).json({ result: "Internal Server Error 500" });
}
};
This is an example of the displayed Error itself:
SyntaxError: Unexpected token '"', ""asdasda"" is not valid JSON
at JSON.parse (<anonymous>)
Based on it I can only assume that It has something to do with the way The values are being captured. Maybe its becouse I am using both a custom onChange as well as react-hook-form. Maybe some form of string manipulation is always necesary. I am not really sure.
Aside from the error that inspired this post I would also appreciate any feedback or input about the code itself or how to Error Check Uniqueness in Forms.
With that being said I appreciate your time to see my post!