Revalidate path after router.push

[rain thorn]

"use server";
import { revalidatePath } from "next/cache";

export async function revalidateUserPage() {
  revalidatePath("/user/[id]", "page");
}

export async function revalidateThingsToDoPage() {
  revalidatePath("/things-to-do/[...slug]", "page");
}

useEffect(() => {
    if (itineraryDeleted && deleteCount === 0) {
      setDeleteCount(1);
      const userId = user?.id ?? "";
      const lookingAtSingleItinerary = pathname.includes("itinerary");

      if (lookingAtSingleItinerary) {
        toast.success("Itinerary deleted. You will be redirected.");
        setTimeout(() => {
          void ctx.itinerary.getByUserId.invalidate();
          void router.push(`/user/${userId}`);
        }, 3000);
      } else {
        toast.success("Itinerary deleted.");
        void revalidateThingsToDoPage();
      }

      setOpenModal(false);
    }
  }, [
    ctx.itinerary.getByUserId,
    deleteCount,
    itineraryDeleted,
    pathname,
    router,
    setOpenModal,
    user?.id,
  ]);

I want to revalidateThingsToDoPage after router.push happens because if it is done before, the current page will break

[grizzled glade]

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

---

In your case, you can use the router.push function's promise to ensure that the page navigation has completed before calling the revalidateThingsToDoPage function. The router.push function returns a promise that resolves when the navigation is complete. Here's how you can modify your code:

setTimeout(() => {
  void ctx.itinerary.getByUserId.invalidate();
  void router.push(`/user/${userId}`).then(() => {
    void revalidateThingsToDoPage();
  });
}, 3000);

In this code, revalidateThingsToDoPage will be called after the router.push navigation has completed.

Please note that the revalidatePath function is used to manually revalidate data and re-render the route segments below a specific path in a single operation. It revalidates the Data Cache, which in turn invalidates the Full Route Cache. You can use it in Route Handlers to revalidate data in response to a third party event (e.g. webhook), or in Server Actions to revalidate data after a user interaction (e.g. form submission, clicking a button) source (https://nextjs.org/docs/app/building-your-application/caching#revalidatepath).

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

@rain thorn kapa.ai is still learning and improving, please let us know how it did by reacting below

[rain thorn]

@grizzled glade This does not work. Here is the error message if you do what you just said:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'then')

Source
src/app/_components/modal/DeleteItinerary.tsx (48:46) @ then

46 | setTimeout(() => {
47 | void ctx.itinerary.getByUserId.invalidate();

48 | void router.push(/user/${userId}).then(() => {
| ^
49 | void revalidateThingsToDoPage();
50 | });
51 | }, 3000);

[grizzled glade]

Let me check the knowledge base for you. One moment! :books:

---

I apologize for the confusion. The router.push function in Next.js does indeed return a Promise that resolves when the navigation is complete. However, the error message you're seeing suggests that the Promise is not being returned correctly.

The void operator in JavaScript is used to disregard a value or expression. In this case, it's disregarding the Promise returned by router.push, which is why you're seeing the error message.

You should remove the void operator before router.push to correctly handle the Promise it returns. Here's how you can modify your code:

setTimeout(() => {{
  ctx.itinerary.getByUserId.invalidate();
  router.push(`/user/${{userId}}`).then(() => {{
    revalidateThingsToDoPage();
  }});
}}, 3000);

In this code, revalidateThingsToDoPage will be called after the router.push navigation has completed.

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

@rain thorn kapa.ai is still learning and improving, please let us know how it did by reacting below

[rain thorn]

@grizzled glade

This is the new error
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'then')

Source
src/app/_components/modal/DeleteItinerary.tsx (48:41) @ then

46 | setTimeout(() => {
47 | void ctx.itinerary.getByUserId.invalidate();

48 | router.push(/user/${userId}).then(() => {
| ^
49 | void revalidateThingsToDoPage();
50 | });
51 | }, 3000);

[grizzled glade]

Let me check the knowledge base for you. One moment! :books: