Revalidate using App Dir tRPC

I am wondering how to trigger a revalidation to occur after a mutation is made

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>
  );
}
Was this page helpful?