Form submission
Answered
Black carp posted this in #help-forum
Black carpOP
I'm using app router trying to sent form submitted data into database using drizzle do I need to create api route ?
Answered by averydelusionalperson
export const addUser = async (values: addUserSchemaType) => {
try {
const newUser = await db.users.create({
data: {
name: values.name,
username: values.userName,
password: values.password,
userRoleId: Number(values.userRoleId),
},
});
if (newUser) return { success: true, message: "New User created" };
return { success: false, message: "New User creation failed" };
} catch (e) {
console.error(e);
return {
success: false,
message: "Something went wrong",
};
}
};39 Replies
U can use server actions
Black carpOP
let me check on docs
Black carpOP
its like whatever we do inside api route we can do the same using server actions ?
export const addUser = async (values: addUserSchemaType) => {
try {
const newUser = await db.users.create({
data: {
name: values.name,
username: values.userName,
password: values.password,
userRoleId: Number(values.userRoleId),
},
});
if (newUser) return { success: true, message: "New User created" };
return { success: false, message: "New User creation failed" };
} catch (e) {
console.error(e);
return {
success: false,
message: "Something went wrong",
};
}
};Answer
^ my server action
const proccessForm: SubmitHandler<addUserSchemaType> = async (data) => {
console.log(data);
const result = await addUser(data);
if (result.success) {
toast({
title: "New User created",
});
form.reset();
router.refresh();
} else {
toast({
variant: "destructive",
title: result.message ?? "Creation Failed",
description:
result.message || "Something went wrong, please try again!",
});
}
};^ form submit
Black carpOP
thank you !!
Let me try it
Let me try it
sure, lemme know once it's done
Black carpOP
my drizzle query
import { db } from "./db";
import { Urls } from "./schema";
type Data = {
Name: string;
longurl: string;
};
export const addData = async (data: Data) => {
const userData = {
Name: data.Name,
longurl: data.longurl,
};
await db.insert(Urls).values(userData);
};I'm using react hook form
async function onSubmit(values: z.infer<typeof formSchema>) {
try{
const userData = {
Name: values.name,
longurl: values.Link
}
await addData(userData)
} catch(error) {
console.error("Error Submiting form")
}
}can i do it this way ?
yes, I use zod, and react-hook-form too
Black carpOP
but its giving error
where do you have the action function?
addDataBlack carpOP
yeah
I mean, where do you have it, which file?
Black carpOP
lib/queries.ts
try adding
'use server' at the top of fileBlack carpOP
ok
status in pending
Black carpOP
server error
well, check what is the error
Black carpOP
well I can see connection timeout
Black carpOP
It solved
noice, what was the issue?
@averydelusionalperson noice, what was the issue?
Black carpOP
My wrong connection string
noice, if your problem is solved, consider marking answer(message that helped you solve your problem) as solution
noice, thanks 🫡