Confused about revalidating data
Answered
Britannia Petite posted this in #help-forum
Britannia PetiteOP
Hi folks,
I have a page implemented as a server component that provides data to a client component. The client component serves as the main page content and includes:
1. A settings form.
2. A separate section with a list of items (not part of the form).
The items in the list can be added, edited, or removed. To keep things simple, let's focus on the "delete" case. When a user clicks "delete," I call a server action to remove the item from the database. However, the item remains visible in the list until the page is refreshed.
My question is: how can I immediately remove the item from the list once the server action returns a success response? I’d like to avoid refreshing the entire page, as I don’t want to lose the state of the potentially unsaved form.
Thanks!
I have a page implemented as a server component that provides data to a client component. The client component serves as the main page content and includes:
1. A settings form.
2. A separate section with a list of items (not part of the form).
The items in the list can be added, edited, or removed. To keep things simple, let's focus on the "delete" case. When a user clicks "delete," I call a server action to remove the item from the database. However, the item remains visible in the list until the page is refreshed.
My question is: how can I immediately remove the item from the list once the server action returns a success response? I’d like to avoid refreshing the entire page, as I don’t want to lose the state of the potentially unsaved form.
Thanks!
32 Replies
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/post-1')Britannia PetiteOP
Hi @gin , this does nothing in my case, not sure why. After action request nothing happens
what are u expecting to revalidate?
like a clientside state or what
Britannia PetiteOP
It's a data from the server (component) passed to client component
yeah that data will be revalidated
but the component will not rerender
Britannia PetiteOP
hold on, revalidatePath should be called in action or in client component?
only the data will mutate
Britannia PetiteOP
🤦
check this
Britannia PetiteOP
wohoo
'use server'
import { revalidatePath } from 'next/cache'
export default async function submit() {
await submitForm()
revalidatePath('/')
}Britannia PetiteOP
perfect!! TY
nice :)
ty
Korat
@gin Im wondering how this work if the route is dynamic (case where we use next-intl)
do we do revalidatePath(/en|fr/.../...) ?
do we do revalidatePath(/en|fr/.../...) ?
@Korat <@759064479521701888> Im wondering how this work if the route is dynamic (case where we use next-intl)
do we do revalidatePath(/en|fr/.../...) ?
uhm if next-intl works with dynamic segments, u could try revalidating like this
revalidatePath('/(main)/[locale]', 'layout')or only
revalidatePath('/[locale]', 'layout')Korat
are you saying [locale] works?
u can try
im not sure
Korat
ohh locale is a variable right?
yeah
Korat
or no
Korat
aight thanks for the suggestion