I have a Typescript project and want to use form validation with Zod on the front end. I’m also using Prisma ORM. The issue is I’m struggling to get one source of truth for the resource being created/updated. How do you keep those in sync? At the moment, I have 3 separate schemas. What’s the best practice to define your schema once and keep TS, DB and frontend validation in sync?

I tried adding a the Prisma generator Prisma Zod Generator to my Remix project but I am struggling a bit with understanding how it is supposed to be used when updating a model. I have a custom model TextContent defined as such:

model TextContent {
  content   Content @relation(fields: [contentId], references: [id], onDelete: Cascade)
  contentId String  @id
  text      String
}

I am now trying to create an action function where I validate the input via the generated schema. I understood that the zod schema parse method won't work directly on the FormData object that remix uses so I made use of Remix Params Helper which offers a convenient helper method getFormData where you simply put in the request and the zod schema object to get the parsed data:

export async function action({ request, params }: ActionArgs) {
  const { data } = await getFormData(request, TextContentUncheckedUpdateInputObjectSchema)
  await prisma.textContent.update({
    data,
    ^^^^
    where: {
      contentId: params.contentId
    }
  });
  return null;
}

The problem now is that I get a very long typechecking error on data inside the prisma update call:

TS2322: Type 'TextContentUncheckedUpdateInput | undefined' is not assignable to type '(Without<TextContentUpdateInput, TextContentUncheckedUpdateInput> & TextContentUncheckedUpdateInput) | (Without<...> & TextContentUpdateInput)'.   Type 'undefined' is not assignable to type '(Without<TextContentUpdateInput, TextContentUncheckedUpdateInput> & TextContentUncheckedUpdateInput) | (Without<...> & TextContentUpdateInput)'.  index.d.ts(7573, 5): The expected type comes from property 'data' which is declared here on type '{ select?: TextContentSelect | null | undefined; include?: TextContentInclude | null | undefined; data: (Without<TextContentUpdateInput, TextContentUncheckedUpdateInput> & TextContentUncheckedUpdateInput) | (Without<...> & TextContentUpdateInput); where: TextContentWhereUniqueInput; }'

Which is kinda difficult to decipher. I find that it not so super clear how the many different generated schemas are meant to be applied, the docs only offer one single usage example. Any ideas?

Update

Realized that I had used getFormData instead of getFormDataOrFail which made data possibly undefined. After fixing it I now get a problem during runtime instead where data returned by the getFormDataOrFail is an empty object. I have double checked that the correct data is contained in the request as well (If I check the contents of request.formData() I can see both a value for contentId & text). So that's a new problem which I have no idea how to solve.

Update 2

I suspected that my application wasn't bundling the code with getFormDataOrFail correctly and after making some config changes I now get an error message when trying to parse the data:

Error: Unexpected type ZodUnion for key contentId
    at processDef (my-app/node_modules/remix-params-helper/dist/cjs/helper.js:179:15)
    at processDef (my-app/node_modules/remix-params-helper/dist/cjs/helper.js:162:9)
    at parseParams (my-app/node_modules/remix-params-helper/dist/cjs/helper.js:36:9)
    at getParamsInternal (my-app/node_modules/remix-params-helper/dist/cjs/helper.js:54:9)
    at getFormDataOrFail (my-app/node_modules/remix-params-helper/dist/cjs/helper.js:120:20)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at action (my-app/app/routes/contents.$contentId.tsx:12:15)
    at Object.callRouteActionRR (my-app/build/server.js:39649:20)
    at callLoaderOrAction (my-app/build/server.js:38772:20)
    at submit (my-app/build/server.js:38365:20)

This is getting more confusing every time :)

Update 3

It seems the problem is in Remix Params Helper as it doesn't yet have support for ZodUnion types. I resorted to using Zodix instead.