Wait for revalidatePath to complete

[asnaeb]

I find it would be useful if revalidatePath from "next/cache" would allow to wait for the revalidation to complete, returning Promise<void> instead of void. This would enable, for example, the following pattern (using server actions just for brevity):

// actions.js

"use server";

export async function action(id, pathname) {
  await db.deactivateItem(id);
  await revalidatePath(pathname); // <-- Allows to return from the function only after revalidation happens
}

// page.js

import Items from "./client.js";

export default async function ItemsPage() {
  const items = await db.getItems();
  return <Items items={items}/>
}

// client.js

"use client";

import {useTransition} from "react";
import {usePathname} from "next/navigation";
import {action} from "./actions.js"

export default function Items({items}) {
  const listItems = items.map(item =>  <Item item={item}/>);
  return <ul>{listItems}</ul>;
}

function Item({item}) {
  const pathname = usePathname();
  const [isLoading, startTransition] = useTransition();
  const handler = () => {
    startTransition(() => {
      action(item.id, pathname).catch();
    });
  };
  let className;
  if (isLoading) {
    className = "loading";
  }
  else if (!item.active) {
    className = "inactive";
  }
  else {
    className = "default";
  }
  return <li>
    <span className={className}>
      {item.name}
    </span>
    <button onClick={handler}>deactivate</button>
  </li>;
}

This way, "loading" class will only be removed after revalidation. The same example without revalidatePath being a promise, as it is right now, would result in "loading" class removed, revalidation happening and "inactive" class applied after revalidation, flashing the "default" class during revalidatePath call. Is there some other way around this that I am missing?

[sregg]

@asnaeb did you find a workaround for this issue?

[asnaeb]

Unfortunately, there is no way that I am aware of to know when a revalidation is complete. I hope this will be taken into account for a future development.

[leerob]

Hey! Let me try and explain. revalidateTag is different than res.revalidate in the Pages Router:

• revalidateTag is a "purge", so it is not blocking to retrieve new data. There isn't a way to wait for the event to finish.
• res.revalidate can be await-ed, and it does wait for the entire revalidation to complete.

We believe the non-blocking API is a better default for the App Router. You have a couple options here.

1. You could call an API Route (pages/api) from your Server Action, which calls res.revalidate.
2. You could call revalidatePath and then call fetch on the path, to initiate the revalidation of the data.

[sregg]

Also @leerob, any idea why Vercel's own code is awaiting revalidateTag here?

[roblonj]

Did this solve your issue? I am also looking for a solution to store a "Pending" state until revalidation is complete.

[HialeahLiam]

I just tried it and it did not save the issue. There is still a delay between the default loading state and the page actually refreshing.

[asnaeb]

Re: 2., the revalidation of the fetch inside the path (or tag) is working fine. We're just having a hard time finding a way to show the user a loading indicator while:

1. Server action starts
2. POST fetch mutation to our API starts
3. POST fetch mutation to our API completes
4. Revalidation starts
5. GET fetch query in path refreshes
6. The new HTML is rendered

An idea for a possible solution

[stephan-noel]

@leerob could you provide an example of 2.? I feel like it's bad UX to show stale data after showing a loading indicator, but duplicate fetches also doesn't seem like a good approach.

In the meantime, the approach I've taken is to just use useOptimistic and calling addOptimistic after awaiting the server action. For some user updates I don't want to be optimistic since they are critical. Using this approach, I can be sure the mutation was successful and now the only thing I'm being optimistic about is the revalidation GET completing successfully.

Pros

• User gets to see updated data without waiting for revalidation

Cons

• requires more code from me, it would be cleaner to let the revalidation trigger the re-render. I can make something reusable out of this probably but it doesn't seem like an ideal approach either way.

Please let me know your thoughts.

I can't provide the all of the code, active is a prop passed to this client component from a fetch in a server component:

  const [optimisticActive, addOptimistic] = useOptimistic(
    active,
    (_, optimisticValue: boolean) => optimisticValue
  );

pending={pending}
onClick={() => {
              startTransition(async () => {
                const newActive = !optimisticActive ;
                await updateUserActivation({
                  userId,
                  active: newActive,
                });
                addOptimistic(newActive);
                setOpen(false);
              });
            }}
          >
            {optimisticActive ? "Deactivate" : "Activate"}
          </Button>