Typing when passing a safe action as prop with bindings (next-safe-action@v7)

[nmajor]

I'm trying to pass safe action as a prop to a form but I'm running into so tricky type errors. Please forgive me if this is a stupid question, I worry I'm missing something obvious. I've tried a bunch or work arounds but the example below demonstrates the issue I'm running into.

Safe update action

export const objectUpdateAction = actionClient
  .schema(objectUpdateSchema)
  .bindArgsSchemas<[objectId: z.ZodString]>([z.string()])
  .action(async ({ parsedInput, bindArgsParsedInputs }) => {
    console.log("blah hi parsedInput", parsedInput);
    console.log("blah hi bindArgsParsedInputs", bindArgsParsedInputs);

    return { success: true };
  });

Parent page function

export default function EditPage({
  params: { objId },
}: {
  params: { objId: string };
}) {
  const boundAction = objectUpdateAction.bind(null, objId);

  return <ObjectForm action={boundAction} /> <--------- type error here for the action prop (type error 1)
}

Child client form function

"use client"
...
export function ObjectForm({
  action,
}: {
  action: typeof objectUpdateAction;
}) {
  const { execute, input, result } = useAction(action); <--------- type error here when passing action arg (type error 2)

  const { validationErrors, serverError } = result;

  return (
    <form action={execute} className="space-y-6">
        ...
    </form>

type error 1:

Type '(input: FormData | FormDataLikeInput) => Promise<SafeActionResult<string, ZodEffects<ZodObject<{ label: ZodEffects<ZodString, string, string>; content: ZodEffects<ZodString, string, string>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., unknown>>' is not assignable to type 'SafeActionFn<string, ZodEffects<ZodObject<{ label: ZodEffects<ZodString, string, string>; content: ZodEffects<ZodString, string, string>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, [objId: ...], { ...; }, [objId: ...], { ...; }>'.
  Types of parameters 'input' and 'objId' are incompatible.
    Type 'string' is not assignable to type 'FormData | FormDataLikeInput'.ts(2322)
object-form.tsx(27, 3): The expected type comes from property 'action' which is declared here on type 'IntrinsicAttributes & { onCancelPath?: string | undefined; onSuccessPath?: string | undefined; action: SafeActionFn<string, ZodEffects<ZodObject<{ label: ZodEffects<ZodString, string, string>; content: ZodEffects<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, [en...'

type error 2:

Argument of type 'SafeActionFn<string, ZodEffects<ZodObject<{ label: ZodEffects<ZodString, string, string>; content: ZodEffects<ZodString, string, string>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, [objId: ...], { ...; }, [objId: ...], { ...; }>' is not assignable to parameter of type 'HookSafeActionFn<string, ZodEffects<ZodObject<{ label: ZodEffects<ZodString, string, string>; content: ZodEffects<ZodString, string, string>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, [objId: ...], { ...; }, [objId: ...], { ...; }>'.
  Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2345)

It looks like the core issue is that the type changes when .bindArgsSchemas is used with the actionClient.

I know it all looks like a mess, but does anyone have an idea of how to approach passing one of these bound safe actions through to a child prop? I couldnt find a good example to emulate.

[TheEdoRan]

Hey, can you please provide a link to a repo with a minimal reproduction of this issue? Thanks!