T
tRPC

[How To?] Create a record in database on form submission...

[How To?] Create a record in database on form submission...

TLTrader Launchpad11/9/2023
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:
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.
TLTrader Launchpad11/10/2023
Actually, looking now i can see an error:
uuid3.replace is not a function
uuid3.replace is not a function
on the trpc call. I have a uuid field I created that is supposed to work with sqlite. Ill remove it and try to insert a record just using basic id and report back. If anyone has an implementation of binary uuids in sqlite id love to see it. removed the uuid database column and all works as expected. Its some error im my implementation of uuids in sqlite, not a trpc issue. if anyone has a method for storing uuids in a cloudflare d1 database, sqlite, let me know

Looking for more? Join the community!

T
tRPC

[How To?] Create a record in database on form submission...

Join Server