Improving Server Action
Answered
Holland Lop posted this in #help-forum
Holland LopOP
Hey, so I wrote this simple server action.
I wanted to simply return the checkout object, but for some reason classes aren't supported for being passed from server client.
So I have 2 questions: Why aren't classes supported from server to client, and is there a way to make this code better, or more correct? Huge thanks :)
export async function getCheckout(id: string) {
revalidatePath('/');
const client = generateClient();
const checkout = await client.checkout.fetch(id);
const items = checkout.lineItems.map((item) => {
return {
title: item.title,
quantity: item.quantity,
price: item.variant?.price.amount,
cc: item.variant?.price.currencyCode,
id: item.id,
};
});
return {
items: items,
subtotal: {
amt: checkout.subtotalPrice.amount,
cc: checkout.subtotalPrice.currencyCode,
},
};
}I wanted to simply return the checkout object, but for some reason classes aren't supported for being passed from server client.
So I have 2 questions: Why aren't classes supported from server to client, and is there a way to make this code better, or more correct? Huge thanks :)
Answered by joulev
Why aren't classes supported from server to clientbecause since it will go across the network boundary, it must be serialisable. plain objects are serialisable, but class are not. if your class has a method (member function), how do you want to serialise/stringify it to send over the network?
is there a way to make this code better, or more correct?* firstly,
id is actually not guaranteed to be a string. so do verify it is a string and it is a valid id before using it* maybe it's better/more intuitive to call
revalidatePath after everything5 Replies
@Holland Lop Hey, so I wrote this simple server action.
ts
export async function getCheckout(id: string) {
revalidatePath('/');
const client = generateClient();
const checkout = await client.checkout.fetch(id);
const items = checkout.lineItems.map((item) => {
return {
title: item.title,
quantity: item.quantity,
price: item.variant?.price.amount,
cc: item.variant?.price.currencyCode,
id: item.id,
};
});
return {
items: items,
subtotal: {
amt: checkout.subtotalPrice.amount,
cc: checkout.subtotalPrice.currencyCode,
},
};
}
I wanted to simply return the checkout object, but for some reason classes aren't supported for being passed from server client.
So I have 2 questions: Why aren't classes supported from server to client, and is there a way to make this code better, or more correct? Huge thanks :)
Why aren't classes supported from server to clientbecause since it will go across the network boundary, it must be serialisable. plain objects are serialisable, but class are not. if your class has a method (member function), how do you want to serialise/stringify it to send over the network?
is there a way to make this code better, or more correct?* firstly,
id is actually not guaranteed to be a string. so do verify it is a string and it is a valid id before using it* maybe it's better/more intuitive to call
revalidatePath after everythingAnswer
@joulev > Why aren't classes supported from server to client
because since it will go across the network boundary, it must be serialisable. plain objects are serialisable, but class are not. if your class has a method (member function), how do you want to serialise/stringify it to send over the network?
> is there a way to make this code better, or more correct?
* firstly, `id` is actually not guaranteed to be a string. so do verify it is a string and it is a valid id before using it
* maybe it's better/more intuitive to call `revalidatePath` after everything
Holland LopOP
if your class has a methodreally good point that i didn't think of, thank you for pointing that out.
on your other points, thank you for the feedback. I'm actually a little unsure of how exactly revalidatePath works; I wanted to not cache the results of my server action, so I included it (as the docs mention), but I'm still a little confused about it and how to use it correctly?
And, thank you for getting back to me, much appreciated :)
@Holland Lop > if your class has a method
really good point that i didn't think of, thank you for pointing that out.
on your other points, thank you for the feedback. I'm actually a little unsure of how exactly revalidatePath works; I wanted to not cache the results of my server action, so I included it (as the docs mention), but I'm still a little confused about it and how to use it correctly?
And, thank you for getting back to me, much appreciated :)
The result of the server action is never cached I think. Revalidate functions are to revalidate the pages, for example in the above server action, after the action is run, (the server components of) the page / is also rerun and the result sent to the client
@joulev The result of the server action is never cached I think. Revalidate functions are to revalidate the pages, for example in the above server action, after the action is run, (the server components of) the page / is also rerun and the result sent to the client
Holland LopOP
ahhh, i think i understand what you mean. does revalidating paths apply to “children†paths so to speak? i.e revalidating / will revalidating /about, or any other page
@Holland Lop ahhh, i think i understand what you mean. does revalidating paths apply to “children†paths so to speak? i.e revalidating / will revalidating /about, or any other page
Depends on what you use for the second parameter https://nextjs.org/docs/app/api-reference/functions/revalidatePath#parameters