[How To?] Create a record in database on form submission...
I have an application using trpc, Cloudfare D1 database, and trpc.
I am trying to use a tamagui form component to insert a record into the database.
My trpc route:
My drizzle table schema:
My form component:
When i click the form button, i get a 500 internal error on api/trpc side. Can someone tell me what I am doing wrong, i feel like its obvious but im not getting it.
I am trying to use a tamagui form component to insert a record into the database.
My trpc route:
export const carsRouter = router({
all: publicProcedure.query(async ({ ctx }) => {
const { db } = ctx
const allCars = await db.select().from(CarTable).all()
return allCars
}),
create: publicProcedure
.input((raw) => parse(CarSchema, raw))
.mutation(async ({ ctx, input }) => {
const { db } = ctx
await db.insert(CarTable).values(input).run()
}),
})export const carsRouter = router({
all: publicProcedure.query(async ({ ctx }) => {
const { db } = ctx
const allCars = await db.select().from(CarTable).all()
return allCars
}),
create: publicProcedure
.input((raw) => parse(CarSchema, raw))
.mutation(async ({ ctx, input }) => {
const { db } = ctx
await db.insert(CarTable).values(input).run()
}),
})My drizzle table schema:
export const CarTable = sqliteTable('Car', {
id: integer('id').primaryKey({ autoIncrement: true }),
uuid: binary('uuid', { length: 16 }).default('hex(randomblob(16))').unique(), // Generate a random 16-byte binary string
make: text('make'),
model: text('model'),
year: integer('year'),
color: text('color'),
price: real('price'),
mileage: integer('mileage'),
fuelType: text('fuelType'),
transmission: text('transmission'),
})export const CarTable = sqliteTable('Car', {
id: integer('id').primaryKey({ autoIncrement: true }),
uuid: binary('uuid', { length: 16 }).default('hex(randomblob(16))').unique(), // Generate a random 16-byte binary string
make: text('make'),
model: text('model'),
year: integer('year'),
color: text('color'),
price: real('price'),
mileage: integer('mileage'),
fuelType: text('fuelType'),
transmission: text('transmission'),
})My form component:
export const VirtualizedListScreen = (): React.ReactNode => {
const [make, setMake] = useState("");
const createCar = trpc.car.create.useMutation({
onSuccess: () => {
console.log("create post success")
/* router.refresh();
setName(""); */
},
onError: (e) => {
console.log("Error", e)
}
});
return (
<YStack fullscreen f={1}>
<Form
onSubmit={() => {
createCar.mutate({ make, uuid: 123456 });
}}
>
<Input
placeholder="Title"
value={make}
onChangeText={setMake}
/>
<Form.Trigger asChild>
<Button />
</Form.Trigger>
</Form>
{carsListLayout}
</YStack>
)
}export const VirtualizedListScreen = (): React.ReactNode => {
const [make, setMake] = useState("");
const createCar = trpc.car.create.useMutation({
onSuccess: () => {
console.log("create post success")
/* router.refresh();
setName(""); */
},
onError: (e) => {
console.log("Error", e)
}
});
return (
<YStack fullscreen f={1}>
<Form
onSubmit={() => {
createCar.mutate({ make, uuid: 123456 });
}}
>
<Input
placeholder="Title"
value={make}
onChangeText={setMake}
/>
<Form.Trigger asChild>
<Button />
</Form.Trigger>
</Form>
{carsListLayout}
</YStack>
)
}When i click the form button, i get a 500 internal error on api/trpc side. Can someone tell me what I am doing wrong, i feel like its obvious but im not getting it.
