N13: Feeding an event back to a server component from a client component
Answered
Red wasp posted this in #help-forum
Red waspOP
I have a server component that loads the initial data, let's say a list of TODO items (date, team a, team b, etc) in a table.
on each row I have a "done" button, this is a client component, and within the component I have an onclick that calls a server action
when that done button is clicked I'd like to tell the server component to refresh the TODO list, what is the best way to achieve this, or is it only possible by moving to a client side approach for the parent component?
on each row I have a "done" button, this is a client component, and within the component I have an onclick that calls a server action
when that done button is clicked I'd like to tell the server component to refresh the TODO list, what is the best way to achieve this, or is it only possible by moving to a client side approach for the parent component?
Answered by riský
inside your server action, you should use [
revalidatePath](https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#revalidating-data), and that will cause a refresh of the page with new data (ie removed old)15 Replies
inside your server action, you should use [
revalidatePath](https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#revalidating-data), and that will cause a refresh of the page with new data (ie removed old)Answer
Red waspOP
taking a look now, I think this revalidatePath may well be the missing piece, brb
Red waspOP
I'm not getting the desired effect yet - it looks like revalidatePath may require a refresh (navigation from the user or F5 in the browser)
if you use revalidatePath of the same path in a server action, the page should get a refresh in data...
Red waspOP
in my case the list of TODOs is provided by a component, not a page - could that be causing the problem?
Structure
/page.tsx
contains a <TodoList /> client component /components/TodoList.tsx
within TodoList.tsx there is a button to delete a TODO - using a server action, I've solved this by adding a refresh data call after the delete.
the slightly different problem, let's say I have a button in page.tsx, let's call it <ButtonCreateToDo /> which will also be a client component, with a server action behind it to create the TODO, how can I get this ServerAction to refresh the /components/TodoList?
/page.tsx
contains a <TodoList /> client component /components/TodoList.tsx
within TodoList.tsx there is a button to delete a TODO - using a server action, I've solved this by adding a refresh data call after the delete.
the slightly different problem, let's say I have a button in page.tsx, let's call it <ButtonCreateToDo /> which will also be a client component, with a server action behind it to create the TODO, how can I get this ServerAction to refresh the /components/TodoList?
real quick, is this the server action you mean: https://nextjs.org/docs/app/api-reference/functions/server-actions (and not route handler)
Red waspOP
yep
if this was a typical React client side project a situation like this would either be some sort of statemaneger+bindings, and/or event that specific components would listen to
@riský real quick, is this the server action you mean: <https://nextjs.org/docs/app/api-reference/functions/server-actions> (and not route handler)
as some people think that it is route handler/api route which causes misunderstanding
i don't think you are using it correctly as the docs (and what i have tried), says that after using revalidatePath and it is the same path, that page rets reloaded...
Red waspOP
I think this IS the solution - but I'll need to move away from using a component for the list of todos to using a layout + page (for the TODOs).
Thank you for your help!
lmk when you do that and if it works or doesn't
Red waspOP
(I dumped a current datetime in to the server rendered page, and when triggering a revalidate that date changed, so I'm confident it'll work)