oscklmO
Convex Community•3y ago•
10 replies
oscklm

Schemas, types... using Convex with React Hook Forms & Zod

Heyo 👋

So i'm basically trying to improve the way i integrate and use convex mutation in correlation with my react-hook-forms that use Zod for validation.

What i'm doing:
I have integrated convex into a monorepo using Turborepo, and i define everything convex and schema related within a db package, that i then use in my apps (web, native)

So db folder looks like this:
/db
  /convex
    /_generated
    /functions
      /dashboard
        getStats.ts
      /videos
        createVideo.ts
  /schemas
    index.ts
    posts.ts
    tasks.ts
    ...
index.ts
package.json
...

Example of what my import look like in app using my @flimmer/db
// Somewhere far far away in distant lands...
import { createVideoFormSchema } from "@flimmer/db/schemas";

Example of a schema in the db package
// db/schemas/videos.ts
import { v } from "convex/values";
import { defineTable } from "convex/server";
import { z } from "zod";

export const videosTableSchema = defineTable({
  // Removed to save space \ (^_^) /
}).index("by_muxAssetId", ["muxAssetId"]);

export const createVideoFormSchema = z.object({
  // Removed to save space \ (^_^) /
});


My plan is:
To define the zod form schemas that i use within my react-hook-forms within these individual schema files, to keep it all in one place and allow for importing in apps using db pkg.

I haven't come up with a better approach than defining the table schemas and form schemas separately, even though i'm on the looks for an improved way where i could maybe define a base type and then "piggy back" off those types and create my schemas.

Another viable option i suppose would be to build a convex validation resolver, but that's not something i've delved into - and unsure whether i lack the skills to pull that off haha.

I would love some advice / thoughts on my approach ⭐️
Was this page helpful?