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;
});

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>
  );
}

5 Replies

julius•12mo ago

We're adding primitives for this in tRPC that will let you invalidate calls in a similar fashion to what you're used to. Not shipped yet though

julius•12mo ago

you can inhouse some logic for now if you want - cehck this out: https://github.com/t3-oss/create-t3-turbo/tree/nextjs-app/apps/nextjs

GitHub

create-t3-turbo/apps/nextjs at nextjs-app · t3-oss/create-t3-turbo

Clean and simple starter repo using the T3 Stack along with Expo React Native - create-t3-turbo/apps/nextjs at nextjs-app · t3-oss/create-t3-turbo

julius•12mo ago

          async (fd) => {
            "use server";
            const title = fd.get("title") as string;
            const content = fd.get("content") as string;

            await api.post.create
              .mutate({ title, content })
              .catch((e) => console.log("error", e));
            api.post.all.revalidate(); // <-- invalidation here
          }

          async (fd) => {
            "use server";
            const title = fd.get("title") as string;
            const content = fd.get("content") as string;

            await api.post.create
              .mutate({ title, content })
              .catch((e) => console.log("error", e));
            api.post.all.revalidate(); // <-- invalidation here
          }

KiKo•12mo ago

Awesome! Have you put thought into optimistic updates also? I don't really love the way react made them

brunoeduardodev•12mo ago

This is looking so cool! 👀

Gaming

Programming

Revalidate using App Dir tRPC