How to retrieve validated values from createServerValidate in Next.js?

[CarelessInternet]

The documentation shows how to perform server-side validation in Next.js using Server Actions which works as expected. However, how do you retrieve the validated data after the validation has succeeded? And how should you return an error outside of the serverValidate call so that it shows on the client? The types suggest that a values property exists but upon logging the serverValidate return value, only the errorMap and errors properties exist.

Furthermore, how would you integrate Zod or other validators in createServerValidate? Is the validatorAdapter property of the form options applicable on the server as well?

[crutchcorn]

Let's tackle these one-by-one :)

Handle Validated Data Post Validate

However, how do you retrieve the validated data after the validation has succeeded?

You don't! At least not from our API. You parse formData again manually using your tool of choice. I would suggest using the same as we do internally (decode-formdata), but you can use any tool you'd like.

Add More Errors

And how should you return an error outside of the serverValidate call so that it shows on the client?

You would add the form error to the onServerValidate behavior ideally. You want your non-form validation to occur outside of the serverValidate function call. If you wanted to pass state to the client beyond the server you'd:

// From the action.ts
return {formState: validatedFields};

// From client-component.tsx
const [state, action] = useActionState(someAction, {formState: initialFormState})

const {formState} = state;

const form = useForm({
  ...formOpts,
  transform: useTransform((baseForm) => mergeForm(baseForm, formState), [formState]),
})

Zod Integration

Furthermore, how would you integrate Zod or other validators in createServerValidate?

This is more straightforward than you might think:

// shared-code.ts
export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
  validatorAdapter: zodAdapter()
})

// action.ts
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: z.object({/*...*/})
})

You can even:

// shared-code.ts
export const schema = z.object({/*...*/});

export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
  validatorAdapter: zodAdapter(),
  validators: {
    onChange: schema
  }
})

// action.ts
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: schema
})

Please Review This PR :)

We have a note to improve the PR DX like so:

#783

What do you think? Better or worse?

[CarelessInternet]

Thanks for the answer! I did manage to get the validation working as intended with your help although it did require some experimenting to truly understand the connection between the server and client. Adding custom (localised) errors also worked as I could just return an object with an error array.

As to the PR, I feel indifferent to either approaches. The second approach feels like the first one but with extra steps. Calling createServerValidate returns the aforementioned error/errorMap array, so throwing an error is just a different approach to getting the error. The main benefit I see to the try/catch method is just that, catching any errors that may occur outside serverValidate such as database calls. That may just be me though 🤷.

[nihilum-labs]

@crutchcorn but we cant use this:

export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
  validatorAdapter: zodAdapter(),
  validators: {
    onChange: schema
  }
})

with this: transform: useTransform((baseForm) => mergeForm(baseForm, state), [state]), i have error

he types of 'options.validatorAdapter' are incompatible between these types.
            Type '(() => { validate({ value }: { value: unknown; }, fn: ZodType<any, ZodTypeDef, any>): ValidationError; validateAsync({ value }: { value: unknown; }, fn: ZodType<any, ZodTypeDef, any>): Promise<...>; }) | undefined' is not assignable to type 'undefined'.
              Type '() => { validate({ value }: { value: unknown; }, fn: ZodType<any, ZodTypeDef, any>): ValidationError; validateAsync({ value }: { value: unknown; }, fn: ZodType<any, ZodTypeDef, any>): Promise<...>; }' is not assignable to type 'undefined'.ts(2322)

[mfaux]

@CarelessInternet , are you able to share your code?

[CarelessInternet]

@mfaux I haven't updated the code for a long time so there are no guarantees that it works with the latest versions of TanStack form. It worked at the time of this discussion though.

schema.ts:

import { formOptions } from '@tanstack/react-form/nextjs';
import { usersSelectSchema } from '@/lib/database/schema';
import type { z } from 'zod';
import { zodValidator } from '@tanstack/zod-form-adapter';

const schema = usersSelectSchema.pick({ password: true, username: true });

export const formOpts = formOptions<z.infer<typeof schema>>({
	defaultValues: {
		password: '',
		username: '',
	},
	validatorAdapter: zodValidator(),
});

export default schema;

login.ts (server action file):

'use server';

import { ServerValidateError, createServerValidate } from '@tanstack/react-form/nextjs';
import schema, { formOpts } from './schema';
import { cookies } from 'next/headers';
import { database } from '@/lib/database';
import { eq } from 'drizzle-orm';
import { formError } from '@/lib/forms';
import { getTranslations } from 'next-intl/server';
import { lucia } from '@/lib/auth';
import { redirect } from '@/navigation';
import { users } from '@/lib/database/schema';
import { verify } from '@node-rs/argon2';

const serverValidate = createServerValidate({
	...formOpts,
	onServerValidate: schema,
});

export default async function logIn(_: unknown, formData: FormData) {
	let success = false;

	try {
		await serverValidate(formData);

		const t = await getTranslations('pages.auth.login.form');
		const data = schema.parse(Object.fromEntries(formData));
		const [user] = await database.select().from(users).where(eq(users.username, data.username));

		if (!user) {
			return formError(t('username.errors.invalid'));
		}

		const isCorrectPassword = await verify(user.password, data.password, {
			// recommended minimum parameters
			memoryCost: 19456,
			timeCost: 2,
			outputLen: 32,
			parallelism: 1,
		});

		if (!isCorrectPassword) {
			return formError(t('password.errors.invalid'));
		}

		const session = await lucia.createSession(user.id, {});
		const sessionCookie = lucia.createSessionCookie(session.id);

		cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);

		success = true;
	} catch (error) {
		if (error instanceof ServerValidateError) {
			return formError();
		}
	}

	if (success) {
		redirect('/');
	}
}

page.tsx (a small part of it):

const [actionState, action] = useActionState(logIn, initialFormState);
const form = useForm({
	...formOpts,
	transform: useTransform((baseForm) => mergeForm(baseForm, actionState!), [actionState]),
});