2 replies

Is it possible to revalidate path after a useMutation call?

[FIX]
https://github.com/vercel/next.js/discussions/65487

Add this to next config:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

-------------------------------------------------------------------

I'm practicing the NextJS patterns and decided to do something like UploadThing. I have the following dashboard (image 1).

It's a server component that fetches the projects (ignore all the cache stuff for now):

export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function Dashboard() {
  revalidatePath("/dashboard");
  headers();

  const projects = await api.project.getProjectsForUser();
  void api.project.getProjectsForUser.prefetch(undefined, {
    staleTime: 1000,
  });

  return(...)
};

export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function Dashboard() {
  revalidatePath("/dashboard");
  headers();

  const projects = await api.project.getProjectsForUser();
  void api.project.getProjectsForUser.prefetch(undefined, {
    staleTime: 1000,
  });

  return(...)
};

When you want to create a new project you go to that page which is a client component and uses trpc to create a project.

This all works great up until now, however, when you navigate to /dashboard again by clicking a Link the path does not revalidate and the projects aren't fetched again.

I assume this is because of the NextJS route cachhing, however none of the options I showed before acutally revalidate the page.

I have also tried invalidating the queries after the useMutation call. I also tried revalidatePath from the client component but then you get an error.

Anyone know what is happening and how to fix?

GitHub

[App router] Always reload a page when clicking on a `` · vercel ne...

Summary Next.js caches pages that you have opened. Clicking on <Link> shows an old cached version of a page, if that cached version was loaded less than 15 seconds ago. In that case there are...

Is it possible to revalidate path after a useMutation call?

[FIX]
https://github.com/vercel/next.js/discussions/65487

Add this to next config:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function Dashboard() {
  revalidatePath("/dashboard");
  headers();

  const projects = await api.project.getProjectsForUser();
  void api.project.getProjectsForUser.prefetch(undefined, {
    staleTime: 1000,
  });

  return(...)
};

export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function Dashboard() {
  revalidatePath("/dashboard");
  headers();

  const projects = await api.project.getProjectsForUser();
  void api.project.getProjectsForUser.prefetch(undefined, {
    staleTime: 1000,
  });

  return(...)
};

GitHub

[App router] Always reload a page when clicking on a `` · vercel ne...

Summary Next.js caches pages that you have opened. Clicking on <Link> shows an old cached version of a page, if that cached version was loaded less than 15 seconds ago. In that case there are...

Is it possible to revalidate path after a useMutation call?

Is it possible to revalidate path after a useMutation call?

Similar Threads

Similar Threads

Similar Threads