Is the `.inputValidator` on server functions only meant to be used for type validation?
I am trying to use the
.inputValidator.inputValidator with zod to validate my input but when the input is invalid it throw and when I catch this inside of my component code the entire zod array of errors are serialized instead of showing up as an array. Is this the normal behavior and also why is there nothing in the documentation mentioning this if it is?import { createFileRoute, Link } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { FormEvent } from 'react'
import { z, ZodError } from 'zod'
const AuthUserSchema = z.object({
email: z.email(`Email is not valid`).min(1, `Email is required`),
password: z.string().min(1, `Password is required`)
.min(5, `Password must be at least 5 characters`),
});
const submitForm = createServerFn({ method: 'POST' })
.inputValidator(AuthUserSchema)
.handler(async({ data }) => {
const email = data.email
const password = data.password
console.log({ email, password })
// Process the form...
return { success: true }
})
export const Route = createFileRoute('/auth/signin')({
component: RouteComponent,
})
function RouteComponent() {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const email = formData.get("email") as string;
const password = formData.get("password") as string;
try {
await submitForm({ data: { email, password }})
} catch (error) {
// Handle Zod validation errors
console.log('Error caught:', error) // Debug log
console.log('Error type:', error?.message) // Debug log
console.log('Error data:', error?.data) // Debug log
}
}
return (
<div className="w-11/12 p-12 px-6 py-10 rounded-lg sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-3/12 sm:px-10 sm:py-6">
<h2 className="font-semibold text-4xl mb-4">Sign in</h2>
... Form code would be here
</div>
)
}import { createFileRoute, Link } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { FormEvent } from 'react'
import { z, ZodError } from 'zod'
const AuthUserSchema = z.object({
email: z.email(`Email is not valid`).min(1, `Email is required`),
password: z.string().min(1, `Password is required`)
.min(5, `Password must be at least 5 characters`),
});
const submitForm = createServerFn({ method: 'POST' })
.inputValidator(AuthUserSchema)
.handler(async({ data }) => {
const email = data.email
const password = data.password
console.log({ email, password })
// Process the form...
return { success: true }
})
export const Route = createFileRoute('/auth/signin')({
component: RouteComponent,
})
function RouteComponent() {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const email = formData.get("email") as string;
const password = formData.get("password") as string;
try {
await submitForm({ data: { email, password }})
} catch (error) {
// Handle Zod validation errors
console.log('Error caught:', error) // Debug log
console.log('Error type:', error?.message) // Debug log
console.log('Error data:', error?.data) // Debug log
}
}
return (
<div className="w-11/12 p-12 px-6 py-10 rounded-lg sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-3/12 sm:px-10 sm:py-6">
<h2 className="font-semibold text-4xl mb-4">Sign in</h2>
... Form code would be here
</div>
)
}
