Next.js Discord

Discord Forum

Revalidatepath type page vs undefined

Answered
Siberian posted this in #help-forum
Open in Discord
SiberianOP
Hello!

Does anyone know if there's supposed to be a difference between calling revalidatePath with type as undefined vs page? Cause calling it with page seems to do nothing when trying to revalidate a path like /blog/123abc but calling it with undefined works.
Answered by Arinji
@Siberian no need to be so descriptive :sunglasses_1:, how revalidatePath works is that there are 3 modes, the URL mode (default, so no need to specify), the page mode and the layout mode.

a tldr of this is
URL Mode: It simply revalidates the url you give it, nothing much complicated, it will only target the url you specify

page mode: it revalidates the dynamic param you give it, but wont revalidate any nested page
layout mode: it revalidates the dynamic param you give it and also its nested pages

examples:
Folder Structure: /app/[id]/[id2]
default: you need to mention /1 or /1/1 for it to revalidate the specific page
page: /[id] it will only revalidate the pages under [id] and not [id2]
layout: /[id] it will revalidate pages both under [id] and [id2]
View full answer

20 Replies

Can you show your code please @Siberian
@Arinji Can you show your code please <@257253338939260929>
SiberianOP
I mean just have a very simple API endpoint

const revalidatePathSchema = z.object({
  path: z.string().min(1),
  type: z.enum(["layout", "page"]),
});

export type RevalidatePathControllerArgs = z.input<typeof revalidatePathSchema>;

export const revalidatePathController = (
  args: RevalidatePathControllerArgs,
) => {
  try {
    const { path, type } = revalidatePathSchema.parse(args);
    revalidatePath(path, type);
  } catch (error: any) {
    throw ControllerError.fromError(error);
  }
};

front end
  const onSubmit = async (data: RevalidatePathFormSchema) => {
    const method = "POST";
    const body = JSON.stringify(data satisfies RevalidatePathControllerArgs);
    const res = await fetch("/api/admin/revalidate", { method, body });

    if (res.ok) {
      return toast.success(`Revalidated ${data.path}`);
    } else {
      const body = await res.json();
      console.log(body);
      return toast.error(`Failed to revalidate ${data.path}. ${body.error}`);
    }
  };

I'm confident the revalidatePath is being called with the right arguments.

testing this for a page which is under (root)/(public)/listing/[listingId]/page.tsx

export default async function Page({ params }: PageProps) {
  const { listingId } = params;
  const listing = await getPublishedListingWithAddressAndOwner(listingId);

  if (!listing) notFound();

  return <ListingView listing={listing} />;
}


I'm console logging when the getPublished... function is called for debugging purposes. Page get's built fine and is cached. Revalidating with / and layout works, revalidating with a specific url like /listing/1234 and type undefined works, but not if setting type to page.
while typing this out I tried smth else and it seems like when setting it to page it expects the path of the file, not the url? So including route groups.
which AFAIK is not clearly documented?
(use case for this is to have a section in the admin panel to manually revalidate when needed)
but alright so

* specific url like /listing/5f6dc266-9a46-4435-90c8-b946692f6fad with type undefined works
* route segment with URL path like /listing/[listingId] and type page does not work
* route segment with file path like /(root)/(public)/listing/[listingId] and type page works
* specific url with file path like /(root)/(public)/listing/5f6dc266-9a46-4435-90c8-b946692f6fad does not work
@Siberian no need to be so descriptive :sunglasses_1:, how revalidatePath works is that there are 3 modes, the URL mode (default, so no need to specify), the page mode and the layout mode.

a tldr of this is
URL Mode: It simply revalidates the url you give it, nothing much complicated, it will only target the url you specify

page mode: it revalidates the dynamic param you give it, but wont revalidate any nested page
layout mode: it revalidates the dynamic param you give it and also its nested pages

examples:
Folder Structure: /app/[id]/[id2]
default: you need to mention /1 or /1/1 for it to revalidate the specific page
page: /[id] it will only revalidate the pages under [id] and not [id2]
layout: /[id] it will revalidate pages both under [id] and [id2]
Answer
It's all documented :)
SiberianOP
aah yuh I am stupid and completely read over the difference betewen path/URL :KEKW:
while I'm def the stupid one here I would feel like a type: "URL" with undefined defaulting to that would be more obvious
revalidatePath("/page");
thats valid nextjs ^^
SiberianOP
Yea I know, I mean adding a string option that you can specify like “url”
Again I know Im the dumbdumb
........
SiberianOP
But just based on types it’s not very clear imo
eh, i never faced the issue but yea imo
anyways mark a solution :D