revalidatePath not working for me
Answered
Bull Terrier posted this in #help-forum
Bull TerrierOP
I have a dashboard page which displays list of links. There's a button to create a new link, which redirects to
/new page. this new page creates a link (by calling a server action using next-safe-action library) and redirects to edit page. My edit page has another Link component to go back to dashboard. Now when I create a new link and try to go back to dashboard, it doesn't update.// /dashboard
<Link href="/new">
Generate new link
</Link>
// `/new`
export default async function NewLinkPage() {
await checkAdminSession()
const newLink = await createLink()
return redirect(`/edit/${newLink.data?.url}`)
}
// server action create-link (using next-safe-action library)
'use server'
export const createLink = action(schema, async () => {
const link = await db.insert(...)
revalidatePath(`/dashboard`)
return {
url: link.id,
}
})Answered by Ray
could you try this code instead?
// /dashboard
<form action={createLink}>
<button>Generate new link</button>
</form>
// server action create-link (using next-safe-action library)
'use server'
export const createLink = action(schema, async () => {
const link = await db.insert(...)
revalidatePath(`/dashboard`)
redirect(`/edit/${link.id}`)
})12 Replies
@Bull Terrier I have a dashboard page which displays list of links. There's a button to create a new link, which redirects to `/new` page. this new page creates a link (by calling a server action using next-safe-action library) and redirects to edit page. My edit page has another Link component to go back to dashboard. Now when I create a new link and try to go back to dashboard, it doesn't update.
tsx
// /dashboard
<Link href="/new">
Generate new link
</Link>
// `/new`
export default async function NewLinkPage() {
await checkAdminSession()
const newLink = await createLink()
return redirect(`/edit/${newLink.data?.url}`)
}
// server action create-link (using next-safe-action library)
'use server'
export const createLink = action(schema, async () => {
const link = await db.insert(...)
revalidatePath(`/dashboard`)
return {
url: link.id,
}
})
could you try this code instead?
// /dashboard
<form action={createLink}>
<button>Generate new link</button>
</form>
// server action create-link (using next-safe-action library)
'use server'
export const createLink = action(schema, async () => {
const link = await db.insert(...)
revalidatePath(`/dashboard`)
redirect(`/edit/${link.id}`)
})Answer
Bull TerrierOP
Actually i wanted to have a url /new, so a user can use that without clicking a button.
Let me try this still, and i will get back.
Let me try this still, and i will get back.
@Ray could you try this code instead?
ts
// /dashboard
<form action={createLink}>
<button>Generate new link</button>
</form>
// server action create-link (using next-safe-action library)
'use server'
export const createLink = action(schema, async () => {
const link = await db.insert(...)
revalidatePath(`/dashboard`)
redirect(`/edit/${link.id}`)
})
Bull TerrierOP
if i am doing it your way, calling server action in client component, it works.
why it doesn't work directly?
why it doesn't work directly?
@Bull Terrier if i am doing it your way, calling server action in client component, it works.
why it doesn't work directly?
because
and with server action, you make a request on the client and revalidate the cache after it
revalidatePath only invalidate the cache when the path is next visited.and with server action, you make a request on the client and revalidate the cache after it
Bull TerrierOP
Hmm. My understanding was, since I started on /dashboard, on click, i go to /new. Now this guy redirects me to edit page, say /edit/:id, and also invalidates /dashboard. Now dashboard route is marked for invalidation. On edit page, again i have a link to redirect me back to dashboard. On this visit it should’ve fetched new content. Which step am i wrong on?
@Bull Terrier Hmm. My understanding was, since I started on /dashboard, on click, i go to /new. Now this guy redirects me to edit page, say /edit/:id, and also invalidates /dashboard. Now dashboard route is marked for invalidation. On edit page, again i have a link to redirect me back to dashboard. On this visit it should’ve fetched new content. Which step am i wrong on?
maybe you hit the router cache, do you see new content if you refresh the page?
Bull TerrierOP
Yes, after refresh it shows up
@Bull Terrier Yes, after refresh it shows up
revalidatePath in server action will invalidate the router cacheBull TerrierOP
this is strange, in other cases with almost same code, it immediately refreshes the details.
only in this case, i was directly calling server action in server component. in other places (client components), i was calling server action through
only in this case, i was directly calling server action in server component. in other places (client components), i was calling server action through
use-action client hook@Bull Terrier this is strange, in other cases with almost same code, it immediately refreshes the details.
only in this case, i was directly calling server action in server component. in other places (client components), i was calling server action through `use-action` client hook
no, you are not using server action on the page /new
take a look in here
https://nextjs-faq.com/server-action-call-inside-server-component-rendering
https://nextjs-faq.com/server-action-call-inside-server-component-rendering
Bull TerrierOP
hmm. really strange. anyways thanks for the help