Usage without use client

[ScreamZ]

Hi,

I really love the whole library, and especially this new react hook form wrapper, which is daaaaamn incredible! You made me abandon my good old hook (following) using it.

"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, UseFormProps, UseFormReturn } from "react-hook-form";
import * as z from "zod";

type ZodInstance = typeof z;

/**
 * This function is type inference ready and will auto-validate the useForm with the proper values.
 *
 * If you don't already have the schema or use a dynamic schema, consider useFormWithSchemaBuilder()
 *
 * @param schema - A valid yup schema.
 * @param useFormProps - The props for userForm (do not provide the `resolver` prop as it will be override)
 * @returns
 */
export function useFormWithSchema<S extends z.Schema<any, any>>(
  schema: S,
  useFormProps: UseFormProps<z.infer<S>> = {},
): UseFormReturn<z.infer<S>> {
  return useForm(Object.assign(useFormProps, { resolver: zodResolver(schema) }));
}

/**
 * Use this to prevent importing zod library in your components, if you don't already have the schema, and if you want to have a dynamic schema values.
 * This is rebuild on each render.
 * This function is type inference ready and will auto-validate the useForm with the proper values.
 *
 * If you have already the schema or use a static schema, consider useFormWithSchema()
 *
 * @param schemaBuilder - Should return a validation schema
 * @param useFormProps - The props for userForm (do not provide the `resolver` prop as it will be override)
 * @returns
 */
export function useFormWithSchemaBuilder<S extends z.Schema<any, any>>(
  schemaBuilder: (z: ZodInstance) => S,
  useFormProps: UseFormProps<z.infer<S>> = {},
): UseFormReturn<z.infer<S>> {
  return useForm(Object.assign(useFormProps, { resolver: zodResolver(schemaBuilder(z)) }));
}

But my question today is:

Is there any way to use this library without use client directive ?

I have a small function that I don't need to keep specific state that is just redirecting after deletion:

 <form action={deleteConversationAction.bind(null, existingConversation.id)}>
          <AppButton type="submit" variant="secondary">
            {t("Conversation.deleteConversation.action")}
          </AppButton>
        </form>

I've used bindArgs method. but this yield that Type 'FormData' is not assignable to type 'void'.ts(2322)

I could implement quickly a client component for that, but I was wondering if there is a way to deal with standard server actions, without use client when there is no need to.

I've read the paragraph on zod-form-data, but I want to keep my action callable on server side by other actions, so I don't want to relies on formData, that's why I'm binding.

Thanks :)

[TheEdoRan]

The problem here I think is that a form action expects a single argument of type FormData. If I'm not wrong, you'd have the same issue with a Server Action defined without using next-safe-action.

[ScreamZ]

I just fixed the issue by using an inline use server directive in the server component and call the next safe action' action inside.