T
TanStack•2mo ago
probable-pink

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>
TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>
which in my case equals to 
FormAsyncValidateOrFn<{ firstName: string; age: number;}>
FormAsyncValidateOrFn<{ firstName: string; age: number;}>
the errors property for server errors is using the following definition 
UnwrapFormAsyncValidateOrFn<TOnServer>
UnwrapFormAsyncValidateOrFn<TOnServer>
However this type resolves like this 
type TOnServer = FormAsyncValidateOrFn<{ firstName: string; age: number; }>;
// Below: Resolves to undefined
type ErrorsType = UnwrapFormAsyncValidateOrFn<TOnServer>
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>
      >;
return e.formState as ServerFormState<
        SchemaData,
        FormAsyncValidateOrFn<SchemaData>
      >;
Here's the codesandbox: https://codesandbox.io/p/devbox/zealous-haze-pndd2p
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?