Everything seems okay, but I can’t understand why I am getting this error after fetching the backend.
This is the error I get in the console:
xhr.js:258 POST http://localhost:3000/api/formInput 500 (Internal Server Error)
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
The sending of the form values to the backend happens in my onSubmit function and this is what it looks like:
const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
const response = await axios.post('/api/formInput', values)
} catch (error) {
console.log(error);
}
};
This is how my route.ts (file inside of the formInput folder) looks like:
import { NextRequest, NextResponse } from "next/server";
import { db } from "@/lib/db";
export async function POST(
req:Request
){
try {
const {firstName, lastName, email, numberOfKids} = await req.json()
const form = await db.form.create({
data: {
firstName,
lastName,
email,
numberOfKids
}
})
return NextResponse.json(form)
} catch (error) {
console.log('WRONG INPUTS', error);
return new Response("An error occurred", {status:500})
}
}
And lastly, this is what my model inside of the Prisma folder looks like:
model Form{
id String @id @default(cuid())
firstName String
lastName String
email String
numberOfKids Int
}
Any help would be greatly appreciated!