Next.js Discord

Discord Forum

using .bind(params) breaks server action

Answered
Bullmastiff posted this in #help-forum
Open in Discord
BullmastiffOP
when trying to pass values by invoking a server action, e.g
async () => {
action.bind(values)
}
, nothing ends up happening

however, when passing values with
async () => {
action(values)
}


everything works as expected

why is this the case?
Answered by joulev
yes. the documentation is correct, just that your usage of .bind is wrong. check the MDN link I sent above for more info, but a tl;dr:

* the first argument of the bind is the this. in the documentation they use null and you should use null too. the first argument is not what you pass to the function as argument.

* the result of .bind is a function. .bind itself does not execute that function, and you need to call the result again (e.g. by action={newFunction} or newFunction()) to execute the function.

once again this is not related to nextjs, .bind is a javascript thing. read the MDN link above to learn about .bind and similar functions like .call and .apply.
View full answer

4 Replies

@Bullmastiff when trying to pass values by invoking a server action, e.g async () => { action.bind(values) } , nothing ends up happening however, when passing values with async () => { action(values) } everything works as expected why is this the case?
joulev
this has nothing to do with server actions or nextjs. that's just how .bind works. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

function echo(message) {
  console.log(message);
}

// Working
console.log("Attempt 1");
echo("at1 message");

// NOT working
console.log("Attempt 2");
echo.bind("at2 message");

// Working
console.log("Attempt 3");
echo.bind(null, "at3 message")();

// Working
console.log("Attempt 4");
echo.call(null, "at4 message");
BullmastiffOP
i find that a bit confusing as the docs state that to pass arguments you must do so using the .bind method https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments
@Bullmastiff i find that a bit confusing as the docs state that to pass arguments you must do so using the .bind method https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments
joulev
yes. the documentation is correct, just that your usage of .bind is wrong. check the MDN link I sent above for more info, but a tl;dr:

* the first argument of the bind is the this. in the documentation they use null and you should use null too. the first argument is not what you pass to the function as argument.

* the result of .bind is a function. .bind itself does not execute that function, and you need to call the result again (e.g. by action={newFunction} or newFunction()) to execute the function.

once again this is not related to nextjs, .bind is a javascript thing. read the MDN link above to learn about .bind and similar functions like .call and .apply.
Answer
BullmastiffOP
ah i understand, thank you