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
Vargas11mo 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
Want results from more Discord servers?
Add your server