Revalidate using App Dir tRPC
I am wondering how to trigger a revalidation to occur after a mutation is made
page.tsx
export const pressButton = publicProcedure.mutation(async ({ ctx }) => {
const added = ctx.db.insert(presses).values({});
// revalidatePath("/"); this doesn't work
return added;
});export const pressButton = publicProcedure.mutation(async ({ ctx }) => {
const added = ctx.db.insert(presses).values({});
// revalidatePath("/"); this doesn't work
return added;
});page.tsx
import { createPress } from "~/app/actions";
import { api } from "~/trpc/server";
import { Button } from "~/ui/button";
export default async function Home() {
const latestPress = await api.press.getLatest.query();
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
<div className="flex flex-col items-center gap-2">
<p className="text-2xl text-white">
{latestPress ? latestPress.id : "Loading tRPC query..."}
</p>
</div>
</div>
<form className="flex flex-col gap-2">
<Button formAction={createPress} type="submit">Press the button</Button>
</form>
</main>
);
}import { createPress } from "~/app/actions";
import { api } from "~/trpc/server";
import { Button } from "~/ui/button";
export default async function Home() {
const latestPress = await api.press.getLatest.query();
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
<div className="flex flex-col items-center gap-2">
<p className="text-2xl text-white">
{latestPress ? latestPress.id : "Loading tRPC query..."}
</p>
</div>
</div>
<form className="flex flex-col gap-2">
<Button formAction={createPress} type="submit">Press the button</Button>
</form>
</main>
);
}