DT
Drizzle Team•3mo ago
Strafe

Using drizzle-zod on zod-based form

Hey guys, just wondering if you have a clean solution to implement useAppForm schema and reuse drizzle-zod exposed schema. I'm constantly facing null vs. undefined and troubled to find a clean way to reuse select schema. 
  const form = useAppForm({
    defaultValues: {
      // environmentId: activeEnvironment?.id ?? "",
      name: "",
      lastName: "",
      email: "",
      mobile: "",
      country: "TH",
      clientReferenceId: "",
    } as CustomerCreateForm,
    validators: {
      onSubmit: CustomerInsertSchema,
    },
    onSubmit: async ({ value }) => {
      await createCustomer(value)
      modal.handleClose()
    },
  })
  const form = useAppForm({
    defaultValues: {
      // environmentId: activeEnvironment?.id ?? "",
      name: "",
      lastName: "",
      email: "",
      mobile: "",
      country: "TH",
      clientReferenceId: "",
    } as CustomerCreateForm,
    validators: {
      onSubmit: CustomerInsertSchema,
    },
    onSubmit: async ({ value }) => {
      await createCustomer(value)
      modal.handleClose()
    },
  })
My schema: https://pastebin.com/raw/7cHUjDXN
2 Replies
JustWayne
JustWayne•3mo ago
Here's what I did for my Hono backend and my React/React-Hook-Form frontend using TypeBox (but it should work for Zod too): - Expose all types to be used on the client via OpenAPI 3.1. - Use openapi-fetch to generate the API client and all types from the same OpenAPI schema. - Wrote a script to read the same OpenAPI schema document again, from my development server, to generate any further client-side schemas that I need based off of that. (I am using react-hook-form with AJV validators so I need pure JSON schemas) I dumped my script here, it's probably not exactly what you need, but it might give you some ideas - https://gist.github.com/waynesbrain/beef9638011e458f1ac33ceaa198a193
Gist
Script to generate some JSON Schemas from OpenAPI 3.1
Script to generate some JSON Schemas from OpenAPI 3.1 - _package.json
JustWayne
JustWayne•3mo ago
If you're trying to use zod schemas on the client, then you would have to generate zod schemas off of the OpenAPI schemas.

Did you find this page helpful?