Recently, I encountered an issue while trying to fetch a single data from the database and create a component for editing user input. TypeScript threw a warning at me that read:
Property 'title' does not exist on type '{ error: string; }'.ts(2339)
This is how my zod schema looks like:
const formSchemaData = z.object({
title: z.string().min(2, {
message: "title must be at least 2 characters.",
}),
email: z.string().min(2, {
message: "email must be at least 2 characters.",
}).email(),
//other code
})
export type Events = z.infer<typeof formSchemaData>
const { data, error, isFetching } = useQuery({
queryKey: ["eventId", eventId],
queryFn: async () => await getDataById(eventId),
});
const form = useForm<Events>({
resolver: zodResolver(formSchemaData),
});
return (
<Form {...form}>
<form>
<FormField
control={form.control}
name="title"
defaultValue={data ? data.title : ''}
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input
placeholder="title"
{...field} />
</FormControl>
<FormDescription>
This is your public display name.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
)
I follow this process to fetch data from the database:
export async function getDataById(id: any){
try {
const data = await db.appointmentSchedule.findUnique({
where: {
id:id
}
})
return data
} catch (error) {
return {error: "Something went wrong"}
}
}
If you want to view additional details about types, please check this link.
Unfortunately, I can't share the entire code due to a warning received from Stack Overflow.