Invalidate cache after mutation

Unanswered

Whiskered Tern posted this in #help-forum

Whiskered TernOP

2023-06-30T08:00:48.000Z

I have two pages:
* /ladders - listing all ladders
* /create-ladder - form for adding new ladders

When creating a new ladder at /create-ladder via TRPC (hosted via /pages) and then navigating to /ladders most of the time I wont see the new ladder. I have tried with the following in /app/ladders/page.tsx:

export const dynamic = "force-dynamic";
export const revalidate = 0;
export const fetchCache = "force-no-store";

What can I do to solve this?

22 Replies

@Whiskered Tern I have two pages: * /ladders - listing all ladders * /create-ladder - form for adding new ladders When creating a new ladder at /create-ladder via TRPC (hosted via /pages) and then navigating to /ladders most of the time I wont see the new ladder. I have tried with the following in /app/ladders/page.tsx: jsx export const dynamic = "force-dynamic"; export const revalidate = 0; export const fetchCache = "force-no-store"; What can I do to solve this?

joulev

2023-06-30T08:01:47.000Z

i think adding prefetch={false} to the link that you use to navigate to /ladders will make it work

Whiskered TernOP

2023-06-30T08:02:11.000Z

I'm using router.push does not seem to be an option

joulev

2023-06-30T08:03:40.000Z

hmm is there any links in that page that also points to /ladders?

because this looks like a result of prefetch

Whiskered TernOP

2023-06-30T08:04:12.000Z

yes, I have an abort button that also links to the page

does not seem to help with prefetch=false on that abort button ðŸ˜¦

Ohh, I have one in the menu as well

surely there must be another way to invalidate the cache

joulev

2023-06-30T08:07:53.000Z

but i'm not even sure if that will fix it. if you add prefetch=false to all links to /ladders, does it fix it?

if it does, i think you just make a Link wrapper with prefetch={false} unless otherwise specified

Whiskered TernOP

2023-06-30T08:09:10.000Z

no it did not help, for now I use:

await createMutation.mutateAsync(data);
window.location.assign("/ladders");
// router.push("/ladders");

joulev

2023-06-30T08:09:57.000Z

hmm yeah until mutation stuff are stable we have to live with workaround like this

Whiskered TernOP

2023-06-30T08:10:56.000Z

but that means that using app router also requires one to use server actions in the future if a method for invalidating is not added

if we havn't missed any option/feature here surely this must be a bug?

@Whiskered Tern but that means that using app router also requires one to use server actions in the future if a method for invalidating is not added

joulev

2023-06-30T08:13:44.000Z

you do have options to invalidate; check revalidatePath()

Whiskered TernOP

2023-06-30T08:15:09.000Z

that gives me an error, I think the path needs to be considered dynamic to be able to use that one

Error: Invariant: static generation store missing in revalidateTag /ladders

joulev

2023-06-30T08:16:15.000Z

Oh no the dreaded invariant errors

Maybe it is only callable in the app router route handlers and server actions

Invariant errors are nextjs bugs

Whiskered TernOP

2023-06-30T08:17:53.000Z

ok, sounds like I jumped on the train a bit early. Though I saw app dir was recommended now somewhere

Whiskered TernOP

2023-06-30T08:25:55.000Z

seems other have similar issues: https://github.com/vercel/next.js/issues/51788