router.refresh() only works once

[misty crown]

I am using pages router and useRouter from next/navigation for refreshing the page when an action is taken by user and a certain condition is met.

When the action is taken, the page refreshes properly. But when i take the same action again, the page wont refresh.

I can confirm that my function is being called cuz it shows a toast before the refresh. So it is router.refresh() that's the only thing bugging out.

i have the following handler in a parent component:

  const router = useRouter()
  const handleDelete = async (asset: Pick<AssetData, "id" | "name">) => {
    const isConfirmed = await deleteModal(`Are you sure you want to delete ${asset.name}?`)
    if (!isConfirmed) {
      return
    }

    const response = await deleteAsset(asset.id)
    toast({
      variant: response.success ? "default" : "destructive",
      title: response.message,
    })

    if (!response.success) {
      return
    }

    router.refresh()
  }

which is used inside a child:

                  <Button
                    onClick={async (e) => {
                      e.stopPropagation()
                      handleDelete(asset)
                    }}

the function is being passed to the child component through a context:

const { handleDelete } = useContext(MyContext)

[keen kindle]

Hi @misty crown. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, there's no mention of router.refresh() only working once. The router.refresh() function is used to manually refresh a route, clearing the Router Cache and making a new request to the server for the current route source (https://nextjs.org/docs/app/building-your-application/caching#routerrefresh).

However, there are some issues reported on GitHub where users have experienced problems with router.refresh() not updating server components data in production source (https://github.com/vercel/next.js/issues/52964).

In your case, it's hard to determine the exact cause without more information. It could be related to the state of your application, the way your components are structured, or even a bug in Next.js itself.

Here are a few things you could try:

1. Make sure you're using the latest version of Next.js. Some users have reported that their issues were resolved after updating to the latest version.

2. Try to isolate the problem. Create a minimal reproduction of the issue and see if it still occurs. This could help you identify if the problem is related to your application's state or the way your components are structured.

3. If you're still experiencing the issue, consider opening a new issue on the Next.js GitHub repository. Provide as much information as possible, including a minimal reproduction of the issue, to help the Next.js team investigate.

Remember, router.refresh() is a way to manually refresh a route and it should work as expected unless there's a specific issue with your application or a bug in Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: