Theo's Typesafe Cult•13mo ago

Struggle in tRPC with "use server" not working

Using the create-t3-app latest, I am trying to replace this CreatePost that exist in import { CreatePost } from "@/app/_components/create-post"; to use the import "server-only"; way. The simple change I added, per Theo's example: https://github.com/t3dotgg/server-actions-trpc-examples/blob/main/src/app/rsc-trpc-action/page.tsx , I replaced the CreatePost with

function CreatePost() {
  async function createPostAction(formData: FormData) {
    "use server";

    const name = formData.get("post-name") as string; // Get name from formData
    await api.post.create({ name: name }); // Insert into DB
    revalidatePath("/vanilla-action"); // Revalidate page to see new content
  }

  return (
    <form action={createPostAction}>
      <input
        type="text"
        name="post-name"
        required
      />
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  );
}

function CreatePost() {
  async function createPostAction(formData: FormData) {
    "use server";

    const name = formData.get("post-name") as string; // Get name from formData
    await api.post.create({ name: name }); // Insert into DB
    revalidatePath("/vanilla-action"); // Revalidate page to see new content
  }

  return (
    <form action={createPostAction}>
      <input
        type="text"
        name="post-name"
        required
      />
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  );
}

However, when i try to build this with pnpm build, i get this error:

./src/app/page.tsx:90:20
Type error: This expression is not callable.
  Type '{ mutate: Resolver<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { headers: Headers; db: PrismaClient<PrismaClientOptions, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>; }' has no call signatures.

  88 |
  89 |     const name = formData.get("post-name") as string; // Get name from formData
> 90 |     await api.post.create({ name: name }); // Insert into DB

./src/app/page.tsx:90:20
Type error: This expression is not callable.
  Type '{ mutate: Resolver<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { headers: Headers; db: PrismaClient<PrismaClientOptions, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>; }' has no call signatures.

  88 |
  89 |     const name = formData.get("post-name") as string; // Get name from formData
> 90 |     await api.post.create({ name: name }); // Insert into DB

Does this implies that somehow the code under "src/trpc/server.ts" is not working correclty? I notice that the implementation for api,

export const api = createTRPCProxyClient<AppRouter>({
  transformer, ...

export const api = createTRPCProxyClient<AppRouter>({
  transformer, ...

is different from that given in Theo's example code:

export const api = appRouter.createCaller({
  db: db,
  headers: headers(),
});

export const api = appRouter.createCaller({
  db: db,
  headers: headers(),
});

? Thank you for reading a noob question

GitHub

server-actions-trpc-examples/src/app/rsc-trpc-action/page.tsx at ma...

Contribute to t3dotgg/server-actions-trpc-examples development by creating an account on GitHub.

1 Reply

Vargas•12mo ago

Instead of

await api.post.create({ name: name })

await api.post.create({ name: name })

Try:

await api.post.create.mutate({ name: name })

await api.post.create.mutate({ name: name })

The latest t3-app, uses createTRPCProxyClient as you pointed and it behave like a query client

Gaming

Programming

Struggle in tRPC with "use server" not working