fix(react-form-start): fix infered return type of createServerFn

Author: harry-whorlow

examples/react/tanstack-start/src/routes/index.tsx

@@ -1,8 +1,13 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { mergeForm, useForm, useTransform } from '@tanstack/react-form-start'
-import { useStore } from '@tanstack/react-store'
-import { getFormDataFromServer, handleForm } from 'src/utils/form'
+import {
+  mergeForm,
+  useForm,
+  useStore,
+  useTransform,
+} from '@tanstack/react-form-start'
+
 import { formOpts } from 'src/utils/form-isomorphic'
+import { getFormDataFromServer, handleForm } from '~/server/form'
 
 export const Route = createFileRoute('/')({
   component: Home,

…/react/tanstack-start/src/utils/form.tsx …react/tanstack-start/src/server/form.tsxexamples/react/tanstack-start/src/utils/form.tsx renamed to examples/react/tanstack-start/src/server/form.tsx examples/react/tanstack-start/src/utils/form.tsx renamed to examples/react/tanstack-start/src/server/form.tsx

@@ -4,8 +4,15 @@ import {
   createServerValidate,
   getFormData,
 } from '@tanstack/react-form-start'
+
 import { setResponseStatus } from '@tanstack/react-start/server'
-import { formOpts } from './form-isomorphic'
+import { formOpts } from '../utils/form-isomorphic'
+
+export const getFormDataFromServer = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    return getFormData()
+  },
+)
 
 const serverValidate = createServerValidate({
   ...formOpts,
@@ -39,9 +46,3 @@ export const handleForm = createServerFn({ method: 'POST' })
 
     return 'Form has validated successfully'
   })
-
-export const getFormDataFromServer = createServerFn({ method: 'GET' }).handler(
-  async () => {
-    return getFormData()
-  },
-)

packages/react-form-start/src/createServerValidate.tsx

@@ -15,10 +15,16 @@ import type {
   FormValidateAsyncFn,
   FormValidateOrFn,
   ServerFormState,
+  StandardSchemaV1,
   UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/react-form'
 import type { FormDataInfo } from 'decode-formdata'
 
+type InferServerValidatorOutput<
+  TOnServer extends undefined | FormAsyncValidateOrFn<any>,
+  TFormData,
+> = TOnServer extends StandardSchemaV1<any, infer Output> ? Output : TFormData
+
 interface CreateServerValidateOptions<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
@@ -82,18 +88,32 @@ const serverFn = createServerFn({ method: 'POST' })
     }: {
       value: any
       validationSource: 'form'
-    }) => {
+    }): Promise<{
+      error: UnwrapFormAsyncValidateOrFn<any> | undefined
+      validatedValue: any
+    }> => {
       if (isStandardSchemaValidator(onServerValidate)) {
-        return await standardSchemaValidators.validateAsync(
+        const rawResult = await onServerValidate['~standard'].validate(value)
+
+        if (!rawResult.issues) {
+          return { error: undefined, validatedValue: rawResult.value }
+        }
+
+        const error = await standardSchemaValidators.validateAsync(
           { value, validationSource },
           onServerValidate,
         )
+
+        return { error, validatedValue: undefined }
       }
-      return (onServerValidate as FormValidateAsyncFn<any>)({
+
+      const error = await (onServerValidate as FormValidateAsyncFn<any>)({
         value,
         signal: undefined as never,
         formApi: undefined as never,
       })
+
+      return { error, validatedValue: value }
     }
 
     const referer = getRequestHeader('referer')!
@@ -102,12 +122,12 @@ const serverFn = createServerFn({ method: 'POST' })
       ? decode(formData, info)
       : decode(formData)) as never as any
 
-    const onServerError = (await runValidator({
+    const { error: onServerError, validatedValue } = await runValidator({
       value: decodedData,
       validationSource: 'form',
-    })) as UnwrapFormAsyncValidateOrFn<any> | undefined
+    })
 
-    if (!onServerError) return decodedData
+    if (!onServerError) return validatedValue
 
     const onServerErrorVal = (
       isGlobalFormValidationError(onServerError)
@@ -167,4 +187,6 @@ export const createServerValidate =
     >,
   ) =>
   (formData: FormData, info?: Parameters<typeof decode>[1]) =>
-    serverFn({ data: { defaultOpts, formData, info } })
+    serverFn({ data: { defaultOpts, formData, info } }) as Promise<
+      InferServerValidatorOutput<TOnServer, TFormData>
+    >