stormy-gold

Showing Server Action errors in the client form

I use this example https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions. How best to show the error that occurs already in the server action, after

await serverValidate(formData);

await serverValidate(formData);

For example

  ...
try {
  await serverValidate(formData);

  const { user } = await validateRequest();
  if (!user) {
    return {error: ["no user"]};
  }
  ...

  ...
try {
  await serverValidate(formData);

  const { user } = await validateRequest();
  if (!user) {
    return {error: ["no user"]};
  }
  ...

Here's how to show it in the client form? (I came up with it only directly through state, i.e.

{state?.errors?.[0]}

{state?.errors?.[0]}

And through

const formErrorMap = form.useStore((formState) => formState.errors);
...

 {formErrorMap.map((error) => (
 <p key={error as string}>{error}</p>
 ))}

const formErrorMap = form.useStore((formState) => formState.errors);
...

 {formErrorMap.map((error) => (
 <p key={error as string}>{error}</p>
 ))}

I can't do it. Can someone tell me how to do it better? thank you

React TanStack Form Next Server Actions. Example | TanStack Form Docs

An example showing how to implement Next Server Actions. in React using TanStack Form.

16 Replies

dependent-tan•16mo ago

This code works for me well:

const formErrors = form.useStore((formState) => formState.errors)

const formErrors = form.useStore((formState) => formState.errors)

What specific problem are you having with it?

stormy-goldOP•16mo ago

The component is not updated when formErrors changes (and console.log shows it normally). I'll make an example on codesandbox tomorrow. https://codesandbox.io/p/sandbox/icy-waterfall-59ytjc At first, the error from the server action appears in the browser console, and then is replaced by an empty array. May be bug in Tanstack Form?

fascinating-indigo•16mo ago

As far as I can see you're not using the serverValidate function but you're manually building the response by putting values into the "errors" object. However that property shouldn't be set manually since it's the result of flattening the error maps, that's why you see it once in the logs and then the next update it is overridden If you really want to do it manually, you should

      return {
        errorMap: {
          onServer: "Error!2",
        },
      };

      return {
        errorMap: {
          onServer: "Error!2",
        },
      };

But what is your usecase for that and not using serverValidate?

stormy-goldOP•16mo ago

Main reason: I can't use async in serverValidate. For example, get session from Lucia Auth and check.

const { user } = await validateRequest();

if (!user) {
return { success: false, message: 'User not found' };
}

const { user } = await validateRequest();

if (!user) {
return { success: false, message: 'User not found' };
}

That's why I have to move all async after checking serverValidate. Maybe I'm doing it wrong and I'd be very grateful for an explanation of how I can do it better.

stormy-goldOP•16mo ago

(((

fascinating-indigo•16mo ago

Aaaand that is a perfectly sound reason 😄 I don't know why onServerValidate was designed to take sync calls only but I see the need of doing async stuff there

stormy-goldOP•16mo ago

really really really need it 😦 How can I get by until this is added?

fascinating-indigo•16mo ago

Have you tried with the snippet above, by putting the error inside th errorMap?

stormy-goldOP•16mo ago

As you showed with the error I haven't tried it yet. I will definitely test it in 10 minutes.

fascinating-indigo•16mo ago

Oki, let me know!

fascinating-indigo•16mo ago

btw I think this PR is what we need 🙂 https://github.com/TanStack/form/pull/855

GitHub

Supporting async validation in createServerValidate by ogawa0071 ...

Changes Currently, server-side validation cannot be performed asynchronously. This is particularly inconvenient when using external validation adapters like Zod to check database values against for...

stormy-goldOP•16mo ago

Thank you so much. I'll run and sign this PR It works but strangely. If I press the button for the first time and send the form, nothing is shown, if I press it for the second time. Then it is already shown.

stormy-goldOP•16mo ago

@Leonardo I saw that you accepted the PR on asynchronous validation. Cool, I'll try it today ❤️

fascinating-indigo•16mo ago

Great! Let me know if you have feedback or you notice something off 😄

continuing-cyan•8mo ago

What is the proposed way to create ServerValidateError manually? For example if I have checks not related to form fields, I would like to just throw a form error, using createServerValidate is overhead in such cases IMO.

Gaming

Programming

Showing Server Action errors in the client form

Did you find this page helpful?