[FEATURE] [v7] Support binding additional arguments

[varna]

Problem

If you have a CRUD like model, you might want to provide two arguments instead of one (schema, and id of item being updated/removed). Personally, at the moment I'm doing something like this:

// /app/items/[id]/actions.ts

export const updateItem = action(z.tuple([schema, idSchema]), async (args, { updatedById }) => {
  const [data, id] = args
 
  return ItemModel.update({
    where: { id },
    data: {
      ...data,
      updatedById
    }
  })
})

Today I found out that you can bind additional arguments to actions like this:

Next.js solution

https://nextjs.org/docs/app/api-reference/functions/server-actions#binding-arguments

You can bind arguments to a Server Action using the bind method. This allows you to create a new Server Action with some arguments already bound. This is beneficial when you want to pass extra arguments to a Server Action.

// app/client-component.jsx
'use client'
 
import { updateUser } from './actions'
 
export function UserProfile({ userId }) {
  const updateUserWithId = updateUser.bind(null, userId)
 
  return (
    <form action={updateUserWithId}>
      <input type="text" name="name" />
      <button type="submit">Update User Name</button>
    </form>
  )
}

And then, the updateUser Server Action will always receive the userId argument, in addition to the form data:

// app/actions.js
'use server'
 
export async function updateUser(userId, formData) {
  // ...
}

Good to know: .bind of a Server Action works in both Server and Client Components. It also supports Progressive Enhancement.

next-safe-action

I wanted to ask others, what is their preferred way to do this.

[tiavina-mika]

is there any update on this?

[TheEdoRan]

I'm actively working on v7 release in the next branch, which will support, among other features, Form Actions too. We just have to find the right implementation for them. I'll update this issue with relevant thoughts and changes.

[benjick]

I include the id using hidden inputs:

<input type="hidden" value="id" value={post.id} />