• Hook useForm()

  • import { useForm } from 'react-hook-form'
  • react-hook-form 提供的一個(gè) hook，創(chuàng)建一個(gè)表單對(duì)象用來管理表單狀態(tài)和校驗(yàn)
  • 自動(dòng)管理輸入框的值、錯(cuò)誤提示、提交狀態(tài)等，而不用自己寫一堆 useState()

• drizzle-zod

  • 在當(dāng)前項(xiàng)目中我們使用 Drizzle ORM 定義了數(shù)據(jù)庫表結(jié)構(gòu)，在創(chuàng)建tRPC路由時(shí)用 Zod 生成校驗(yàn)邏輯
  • drizzle-zod 可以通過 Zod 插件將表結(jié)構(gòu)映射成對(duì)應(yīng)的驗(yàn)證規(guī)則，用于校驗(yàn)數(shù)據(jù)，避免手寫驗(yàn)證邏輯；Drizzle表定義 => Zod schema
  • 執(zhí)行 bun add drizzle-zod 安裝，當(dāng)前版本："drizzle-zod": "^0.8.3"、"zod": "^4.0.16"

  import { 
    createInsertSchema,  // 插入時(shí)的Zod schema
    createUpdateSchema,  // 更新時(shí)的Zod schema
    createSelectSchema,  // 查詢結(jié)果的Zod schema
  } from 'drizzle-zod'
  
  export const videos = pgTable("videos", { ... })
  
  export const videosInsertSchema = createInsertSchema(videos)  // 表單提交 / tRPC mutation 時(shí)驗(yàn)證
  export const videosUpdateSchema = createUpdateSchema(videos)  // 表單編輯 / tRPC update mutation 時(shí)驗(yàn)證
  export const videosSelectSchema = createSelectSchema(videos)  // 類型推導(dǎo) / API 返回?cái)?shù)據(jù)的驗(yàn)證
  

• 表單驗(yàn)證數(shù)據(jù)與填充數(shù)據(jù)

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 提供的一個(gè)工具方法，用于從 Zod schema 推導(dǎo)出 TypeScript 類型，所以這里會(huì)生成一個(gè)和 videosUpdateSchema 結(jié)構(gòu)完全一致的類型，可以確保表單數(shù)據(jù)結(jié)構(gòu)與驗(yàn)證規(guī)則一致

• resolver

  • 指定表單的驗(yàn)證規(guī)則
  • 提交表單時(shí)，zodResolver 會(huì)根據(jù) videosUpdateSchema 驗(yàn)證數(shù)據(jù)是否合法

• defaultValues

  • 表單初始值，我們這里是從數(shù)據(jù)庫獲取的 video，會(huì)作為表單默認(rèn)值展示

• Hook trpc.useUtils()

  • 是 tRPC 的一個(gè) hook，通常和數(shù)據(jù)緩存管理或狀態(tài)刷新相關(guān)
  • utils.studio.getOne.invalidate({ videoId }) 更新表單后，也就是在mutation之后手動(dòng)刷新緩存使緩存失效