Tube - Video form

• Hook useForm()

  • import { useForm } from 'react-hook-form'
  • react-hook-form 提供的一个 hook，创建一个表单对象用来管理表单状态和校验
  • 自动管理输入框的值、错误提示、提交状态等，而不用自己写一堆 useState()

• drizzle-zod

  • 在当前项目中我们使用 Drizzle ORM 定义了数据库表结构，在创建tRPC路由时用 Zod 生成校验逻辑
  • drizzle-zod 可以通过 Zod 插件将表结构映射成对应的验证规则，用于校验数据，避免手写验证逻辑；Drizzle表定义 => Zod schema
  • 执行 bun add drizzle-zod 安装，当前版本："drizzle-zod": "^0.8.3"、"zod": "^4.0.16"

  import { 
    createInsertSchema,  // 插入时的Zod schema
    createUpdateSchema,  // 更新时的Zod schema
    createSelectSchema,  // 查询结果的Zod schema
  } from 'drizzle-zod'
  
  export const videos = pgTable("videos", { ... })
  
  export const videosInsertSchema = createInsertSchema(videos)  // 表单提交 / tRPC mutation 时验证
  export const videosUpdateSchema = createUpdateSchema(videos)  // 表单编辑 / tRPC update mutation 时验证
  export const videosSelectSchema = createSelectSchema(videos)  // 类型推导 / API 返回数据的验证
  

• 表单验证数据与填充数据

import { videosUpdateSchema } from '@/db/schema';

const [video] = trpc.studio.getOne.useSuspenseQuery({ id: videoId })

const formObject = useForm<z.infer<typeof videosUpdateSchema>>({
  resolver: zodResolver(videosUpdateSchema), 
  defaultValues: video  
})

• z.infer<typeof videosUpdateSchema>

  • z.infer() 是 Zod 提供的一个工具方法，用于从 Zod schema 推导出 TypeScript 类型，所以这里会生成一个和 videosUpdateSchema 结构完全一致的类型，可以确保表单数据结构与验证规则一致

• resolver

  • 指定表单的验证规则
  • 提交表单时，zodResolver 会根据 videosUpdateSchema 验证数据是否合法

• defaultValues

  • 表单初始值，我们这里是从数据库获取的 video，会作为表单默认值展示

• Hook trpc.useUtils()

  • 是 tRPC 的一个 hook，通常和数据缓存管理或状态刷新相关
  • utils.studio.getOne.invalidate({ videoId }) 更新表单后，也就是在mutation之后手动刷新缓存使缓存失效