T
TanStack•5mo ago
flat-fuchsia

server function error handling

I just started to learn start. and I'm trying to figure out how to handle errors, specifically validator and middleware ones. I don't want to have the whole error stack on the client; 
const ContactForm = z.object({
    name: z.string().min(2, 'Please enter a valid name'),
    email: z.string().email('Please enter a valid email'),
    message: z.string().min(10, 'Message must contain at least 10 characters')
});

const submit = createServerFn({ method: 'POST' })
    .validator(ContactForm)
    .middleware([turstileMiddleware])
    .handler(async ({ data }) => {
        console.log(data, 'hi');
        return 'ok';
    });

export const Route = createFileRoute('/_nav/contact')({
    component: RouteComponent
});

function RouteComponent() {
    submit({ data: { token: 'mytoken', name: 'myname', email: 'bademail', message: 'hi' } })
        .then((d) => console.log(d))
        .catch((d) => console.log(JSON.parse(d.message)));
    return <div>Hello "/_nav/contact"!</div>;
}
const ContactForm = z.object({
    name: z.string().min(2, 'Please enter a valid name'),
    email: z.string().email('Please enter a valid email'),
    message: z.string().min(10, 'Message must contain at least 10 characters')
});

const submit = createServerFn({ method: 'POST' })
    .validator(ContactForm)
    .middleware([turstileMiddleware])
    .handler(async ({ data }) => {
        console.log(data, 'hi');
        return 'ok';
    });

export const Route = createFileRoute('/_nav/contact')({
    component: RouteComponent
});

function RouteComponent() {
    submit({ data: { token: 'mytoken', name: 'myname', email: 'bademail', message: 'hi' } })
        .then((d) => console.log(d))
        .catch((d) => console.log(JSON.parse(d.message)));
    return <div>Hello "/_nav/contact"!</div>;
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?