feat(react-form): return parsed data from serverValidate function (#1318)

* feat(react-form): return parsed data from serverValidate function

Change serverValidate return type from Promise<void> to Promise<TData> to
provide direct access to validated and parsed data. Eliminates the need to
decode formData twice, enhancing developer experience with immediate typed
access to validation results.

Closes #1317

* ci: apply automated fixes and generate docs

* docs: Added example usecase of serverValidate as a comment

Author: SebbeBroman

docs/framework/react/guides/ssr.md

@@ -67,7 +67,13 @@ export const handleForm = createServerFn({
   })
   .handler(async (ctx) => {
     try {
-      await serverValidate(ctx.data)
+      const validatedData = await serverValidate(ctx.data)
+      console.log('validatedData', validatedData)
+      // Persist the form data to the database
+      // await sql`
+      //   INSERT INTO users (name, email, password)
+      //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+      // `
     } catch (e) {
       if (e instanceof ServerValidateError) {
         // Log form errors or do any other logic here
@@ -223,7 +229,13 @@ const serverValidate = createServerValidate({
 
 export default async function someAction(prev: unknown, formData: FormData) {
   try {
-    await serverValidate(formData)
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
   } catch (e) {
     if (e instanceof ServerValidateError) {
       return e.formState
@@ -375,7 +387,13 @@ const serverValidate = createServerValidate({
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData()
   try {
-    await serverValidate(formData)
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
   } catch (e) {
     if (e instanceof ServerValidateError) {
       return e.formState

examples/react/next-server-actions/src/app/action.ts

@@ -17,7 +17,13 @@ const serverValidate = createServerValidate({
 
 export default async function someAction(prev: unknown, formData: FormData) {
   try {
-    await serverValidate(formData)
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
   } catch (e) {
     if (e instanceof ServerValidateError) {
       return e.formState

examples/react/remix/app/routes/_index/route.tsx

@@ -30,7 +30,13 @@ const serverValidate = createServerValidate({
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData()
   try {
-    await serverValidate(formData)
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
   } catch (e) {
     if (e instanceof ServerValidateError) {
       return e.formState

examples/react/tanstack-start/app/utils/form.tsx

@@ -27,7 +27,13 @@ export const handleForm = createServerFn({
   })
   .handler(async (ctx) => {
     try {
-      await serverValidate(ctx.data)
+      const validatedData = await serverValidate(ctx.data)
+      console.log('validatedData', validatedData)
+      // Persist the form data to the database
+      // await sql`
+      //   INSERT INTO users (name, email, password)
+      //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+      // `
     } catch (e) {
       if (e instanceof ServerValidateError) {
         // Log form errors or do any other logic here

packages/react-form/src/nextjs/createServerValidate.ts

@@ -96,7 +96,7 @@ export const createServerValidate =
       validationSource: 'form',
     })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
-    if (!onServerError) return
+    if (!onServerError) return values
 
     const onServerErrorVal = (
       isGlobalFormValidationError(onServerError)

packages/react-form/src/remix/createServerValidate.ts

@@ -96,7 +96,7 @@ export const createServerValidate =
       validationSource: 'form',
     })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
-    if (!onServerError) return
+    if (!onServerError) return values
 
     const onServerErrorVal = (
       isGlobalFormValidationError(onServerError)

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

@@ -100,7 +100,7 @@ export const createServerValidate =
       validationSource: 'form',
     })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
-    if (!onServerError) return
+    if (!onServerError) return data
 
     const onServerErrorVal = (
       isGlobalFormValidationError(onServerError)