conscious-sapphire

Issues with Next.js server actions and TanStack Form

I some issues with TanStack Form and Next.js server actions. I was following this guide: https://tanstack.com/form/latest/docs/framework/react/guides/ssr First issue: Docs show how to validate data but what should I do to go further (e.g save valid data to database)? I tried to use onSubmit prop in createServerValidate but it never fires. I also thought that maybe I should get form values from FormData inside server action but it feels bad because I already had access to those values inside onServerValidate. Also why result of createServerValidate is returned to client right away:

export default async function someAction(prev: unknown, formData: FormData) {
  return await serverValidate(formData)
}

export default async function someAction(prev: unknown, formData: FormData) {
  return await serverValidate(formData)
}

I don't understand how should the flow look like. Second issue: formState.isSubmitting is never true. No matter how long server action lives, it is never showing submitting status. Only If I add onSubmit to useForm and run some async code in here then formState.isSubmitting goes true. Third issue: When I hit submit button then it goes to server action even tough client validation failed. Shouldn't it only go to server if client validation succeded?

13 Replies

afraid-scarlet•2y ago

1. This API may shift in the future to be a throw instead of a return because of this. Truthfully, the Next.js integration is a POC for now more than a prod-ready thing (v0 ftw). I'll probably make this change here soon 2. onSubmit is a required field, even for SSR. If that's not in the docs, that's an issue. (PRs welcomed 🙂 ) 3. Maybe, but this is up for debate. Feel free to make a new issue to discuss the pros and cons

conscious-sapphireOP•2y ago

Thanks for answer

deep-jade•17mo ago

@crutchcorn@Vlk Romanov I just encountered the same issues and I think my view matches. Few things I would recommend a much extended example. It is too basic and unfortunately the documentation is not extensive enough yet. 2. I would have totally expected the isSubmitting to match the server action execution time, and no the onSubmit function, which is empty for me as it does nothing / is not needed really.

rare-sapphire•9mo ago

Hey @crutchcorn , I believe the Next.js integration still has issues. Is the integration still a POC, or is it now production-ready (v1)? I'm noticing problems with the isSubmitting property, and the server action is always called, even when the form is invalid.

fascinating-indigo•9mo ago

Having the same issue. isSubmitting never changes.

rare-sapphire•9mo ago

I believe this related of action and onSubmit. onSubmit is not preventing form action to be triggered, and isSubmitting is not looking to the form action function. If you use useFormStatus (https://react.dev/reference/react-dom/hooks/useFormStatus) the peding on the actions works. But they are not in sync. I hade similar issues with react-hook-form and i need to prevent the submit and trigger a requestSubmit to make it working.

useFormStatus – React

The library for web and native user interfaces

metropolitan-bronze•9mo ago

I don't think it's just NextJS. I see the same isSubmitting issue in Tanstack Start + Form integration if you use the form like this (which is the style shown in the Tanstack Form + Start Docs and their github example):

    <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

    <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

rare-sapphire•9mo ago

The integrations with react 19 seems not be working, and another things: onServerValidate is required but does not validate the form using the validators. I believe the same validation the client run (via validators) should run on server too... after looking for the source code, we can pass a validator to onServerValidate and it will use it to validate the form. Another issue i've notice is that the useTransform example they have does not work. The error comming from the server is not been merged in the current form

adverse-sapphire•9mo ago

I couldn't get the form in nextjs to work with a server action. the initialFormData from tanstack forms'nextjs has undefined data instead of the defaultValues push to it.

<form
            action={(e) => {
              console.log('Action - Form State Values:', form.store.state.values); // defaultValues
              console.log('Action - FormData:', JSON.stringify(Object.fromEntries(e.entries()))); // empty
              return action(); // submits without defaultValues as the event's entries aren't synced with the default values from tanstack form
            }}
// ...
>

<form
            action={(e) => {
              console.log('Action - Form State Values:', form.store.state.values); // defaultValues
              console.log('Action - FormData:', JSON.stringify(Object.fromEntries(e.entries()))); // empty
              return action(); // submits without defaultValues as the event's entries aren't synced with the default values from tanstack form
            }}
// ...
>

rare-sapphire•9mo ago

With this code is possible to use client side validation without triggering the client navigation validation without triggering the action

<form
  action={async (e) => {
    await form.handleSubmit();
    if (form.state.isValid) {
      await action(e);
    }
}}
>

<form
  action={async (e) => {
    await form.handleSubmit();
    if (form.state.isValid) {
      await action(e);
    }
}}
>

But i'm not able to update the form state with the action response...

adverse-sapphire•9mo ago

did you useTransform?

rare-sapphire•9mo ago

Yes, useTransform is not working

rising-crimson•3mo ago

Using isPending to determine if the form is submitting is working for me. isPending is returned from useActionState. For example:

const [state, action, isPending] = useActionState(someAction, initialFormState);

const [state, action, isPending] = useActionState(someAction, initialFormState);

Gaming

Programming

Issues with Next.js server actions and TanStack Form

Did you find this page helpful?