TanStackT
TanStack•7mo ago
endless-jade

SSR Validation lost typesafety

Hello guys, i've tried to refactor my signup form with TanStack Form. I'm using Remix.run so it's submitting a form and i'm getting the data back using useActionData. I have followed the official documentation on how to implement that with Remix.run. I have used Zod schema in onServerValidate and tried to improve the typesafety but to no avail.

Why is the type of const formErrors = useStore(form.store, (formState) => formState.errors) equal to undefined[]?

I have followed the type definitions and the generic parameter of formState is defined as 
TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>


which in my case equals to
FormAsyncValidateOrFn<{ firstName: string; age: number;}>


the errors property for server errors is using the following definition
UnwrapFormAsyncValidateOrFn<TOnServer>


However this type resolves like this
type TOnServer = FormAsyncValidateOrFn<{ firstName: string; age: number; }>;
// Below: Resolves to undefined
type ErrorsType = UnwrapFormAsyncValidateOrFn<TOnServer>


And therefore the errors property is undefined[]. Is there no way to have typesafety with SSR frameworks? Doesn't work even when i casted the returned value in 
action
 to 
return e.formState as ServerFormState<
        SchemaData,
        FormAsyncValidateOrFn<SchemaData>
      >;


Here's the codesandbox: https://codesandbox.io/p/devbox/zealous-haze-pndd2p
Was this page helpful?