feat: enable async serverFn validation (#5583)

Author: canac

e2e/react-start/server-functions/src/routeTree.gen.ts

@@ -23,6 +23,7 @@ import { Route as FormdataContextRouteImport } from './routes/formdata-context'
 import { Route as EnvOnlyRouteImport } from './routes/env-only'
 import { Route as DeadCodePreserveRouteImport } from './routes/dead-code-preserve'
 import { Route as ConsistentRouteImport } from './routes/consistent'
+import { Route as AsyncValidationRouteImport } from './routes/async-validation'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as RedirectTestIndexRouteImport } from './routes/redirect-test/index'
 import { Route as RedirectTestSsrIndexRouteImport } from './routes/redirect-test-ssr/index'
@@ -116,6 +117,11 @@ const ConsistentRoute = ConsistentRouteImport.update({
   path: '/consistent',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AsyncValidationRoute = AsyncValidationRouteImport.update({
+  id: '/async-validation',
+  path: '/async-validation',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -237,6 +243,7 @@ const FormdataRedirectTargetNameRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/async-validation': typeof AsyncValidationRoute
   '/consistent': typeof ConsistentRoute
   '/dead-code-preserve': typeof DeadCodePreserveRoute
   '/env-only': typeof EnvOnlyRoute
@@ -275,6 +282,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/async-validation': typeof AsyncValidationRoute
   '/consistent': typeof ConsistentRoute
   '/dead-code-preserve': typeof DeadCodePreserveRoute
   '/env-only': typeof EnvOnlyRoute
@@ -314,6 +322,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/async-validation': typeof AsyncValidationRoute
   '/consistent': typeof ConsistentRoute
   '/dead-code-preserve': typeof DeadCodePreserveRoute
   '/env-only': typeof EnvOnlyRoute
@@ -354,6 +363,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/async-validation'
     | '/consistent'
     | '/dead-code-preserve'
     | '/env-only'
@@ -392,6 +402,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/async-validation'
     | '/consistent'
     | '/dead-code-preserve'
     | '/env-only'
@@ -430,6 +441,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/async-validation'
     | '/consistent'
     | '/dead-code-preserve'
     | '/env-only'
@@ -469,6 +481,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AsyncValidationRoute: typeof AsyncValidationRoute
   ConsistentRoute: typeof ConsistentRoute
   DeadCodePreserveRoute: typeof DeadCodePreserveRoute
   EnvOnlyRoute: typeof EnvOnlyRoute
@@ -606,6 +619,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ConsistentRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/async-validation': {
+      id: '/async-validation'
+      path: '/async-validation'
+      fullPath: '/async-validation'
+      preLoaderRoute: typeof AsyncValidationRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -765,6 +785,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AsyncValidationRoute: AsyncValidationRoute,
   ConsistentRoute: ConsistentRoute,
   DeadCodePreserveRoute: DeadCodePreserveRoute,
   EnvOnlyRoute: EnvOnlyRoute,

e2e/react-start/server-functions/src/routes/async-validation.tsx

@@ -0,0 +1,64 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import React from 'react'
+import { z } from 'zod'
+
+export const Route = createFileRoute('/async-validation')({
+  component: RouteComponent,
+})
+
+const asyncValidationSchema = z
+  .string()
+  .refine((data) => Promise.resolve(data !== 'invalid'))
+
+const asyncValidationServerFn = createServerFn()
+  .inputValidator(asyncValidationSchema)
+  .handler(({ data }) => data)
+
+function RouteComponent() {
+  const [errorMessage, setErrorMessage] = React.useState<string | undefined>(
+    undefined,
+  )
+  const [result, setResult] = React.useState<string | undefined>(undefined)
+
+  const callServerFn = async (value: string) => {
+    setErrorMessage(undefined)
+    setResult(undefined)
+
+    try {
+      const serverFnResult = await asyncValidationServerFn({ data: value })
+      setResult(serverFnResult)
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'unknown')
+    }
+  }
+
+  return (
+    <div>
+      <button
+        data-testid="run-with-valid-btn"
+        onClick={() => {
+          callServerFn('valid')
+        }}
+      >
+        call server function with valid value
+      </button>
+      <br />
+      <button
+        data-testid="run-with-invalid-btn"
+        onClick={() => {
+          callServerFn('invalid')
+        }}
+      >
+        call server function with invalid value
+      </button>
+      <div className="p-2">
+        result: <p data-testid="result">{result ?? '$undefined'}</p>
+      </div>
+      <div className="p-2">
+        message:{' '}
+        <p data-testid="errorMessage">{errorMessage ?? '$undefined'}</p>
+      </div>
+    </div>
+  )
+}

e2e/react-start/server-functions/src/routes/index.tsx

@@ -63,12 +63,17 @@ function Home() {
         </li>
         <li>
           <Link to="/dead-code-preserve">
-            dead code elimation only affects code after transformation
+            dead code elimination only affects code after transformation
           </Link>
         </li>
         <li>
           <Link to="/abort-signal">aborting a server function call</Link>
         </li>
+        <li>
+          <Link to="/async-validation">
+            server function with async validation
+          </Link>
+        </li>
         <li>
           <Link to="/raw-response">server function returns raw response</Link>
         </li>

e2e/react-start/server-functions/tests/server-functions.spec.ts

@@ -367,6 +367,54 @@ test.describe('server function sets cookies', () => {
   })
 })
 
+test.describe('server functions with async validation', () => {
+  test.use({
+    whitelistErrors: [
+      /Failed to load resource: the server responded with a status of 500/,
+    ],
+  })
+
+  test('with valid input', async ({ page }) => {
+    await page.goto('/async-validation')
+
+    await page.waitForLoadState('networkidle')
+
+    await page.getByTestId('run-with-valid-btn').click()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-testid="result"]:has-text("valid")')
+    await page.waitForSelector(
+      '[data-testid="errorMessage"]:has-text("$undefined")',
+    )
+
+    const result = (await page.getByTestId('result').textContent()) || ''
+    expect(result).toBe('valid')
+
+    const errorMessage =
+      (await page.getByTestId('errorMessage').textContent()) || ''
+    expect(errorMessage).toBe('$undefined')
+  })
+
+  test('with invalid input', async ({ page }) => {
+    await page.goto('/async-validation')
+
+    await page.waitForLoadState('networkidle')
+
+    await page.getByTestId('run-with-invalid-btn').click()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-testid="result"]:has-text("$undefined")')
+    await page.waitForSelector(
+      '[data-testid="errorMessage"]:has-text("invalid")',
+    )
+
+    const result = (await page.getByTestId('result').textContent()) || ''
+    expect(result).toBe('$undefined')
+
+    const errorMessage =
+      (await page.getByTestId('errorMessage').textContent()) || ''
+    expect(errorMessage).toContain('Invalid input')
+  })
+})
+
 test('raw response', async ({ page }) => {
   await page.goto('/raw-response')
 

packages/start-client-core/src/createMiddleware.ts

@@ -227,7 +227,7 @@ export type IntersectAllValidatorOutputs<TMiddlewares, TInputValidator> =
       ? IntersectAllMiddleware<TMiddlewares, 'allOutput'>
       : IntersectAssign<
           IntersectAllMiddleware<TMiddlewares, 'allOutput'>,
-          ResolveValidatorOutput<TInputValidator>
+          Awaited<ResolveValidatorOutput<TInputValidator>>
         >
 
 /**

packages/start-client-core/src/createServerFn.ts

@@ -703,17 +703,14 @@ export type MiddlewareFn = (
   },
 ) => Promise<ServerFnMiddlewareResult>
 
-export function execValidator(
+export async function execValidator(
   validator: AnyValidator,
   input: unknown,
-): unknown {
+): Promise<unknown> {
   if (validator == null) return {}
 
   if ('~standard' in validator) {
-    const result = validator['~standard'].validate(input)
-
-    if (result instanceof Promise)
-      throw new Error('Async validation not supported')
+    const result = await validator['~standard'].validate(input)
 
     if (result.issues)
       throw new Error(JSON.stringify(result.issues, undefined, 2))