trpc `Unsupported POST-request to query procedure` when using `mutation`

[Mnigos]

I got trpc error when trying to use trpc.thought.create.mutate

Error: Unsupported POST-request to query procedure at path "thought.create"

thought.router

@Router({ alias: 'thought' })
export class ThoughtRouter {
  constructor(private readonly prisma: PrismaService) {}

  @Mutation({ input: createThoughtSchema, output: thoughtSchema })
  async create(
    @Input('content') content: Thought['content'],
    @Input('authorId') authorId: Thought['authorId']
  ) {
    const { id } = await this.prisma.thought.create({
      data: {
        content,
        authorId,
      },
    })

    return this.prisma.thought.findUnique({
      where: {
        id,
      },
      select: {
        id: true,
        content: true,
        author: true,
        createdAt: true,
      },
    })
  }
}

server.ts

import { initTRPC } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.create();
const publicProcedure = t.procedure;

const appRouter = t.router({
  thought: t.router({
    create: publicProcedure.input(thoughtSchema
      .pick({
        content: true,
      })
      .extend({
        authorId: z.string(),
      })).output(z.object({
        id: z.string(),
        content: z.string(),
        author: userSchema,
        createdAt: z.date(),
      })).mutation(async () => "PLACEHOLDER_DO_NOT_REMOVE" as any)
  })
});

export type AppRouter = typeof appRouter;

And usage inside nextjs app

trpc.ts

import { createTRPCClient, httpBatchLink } from '@trpc/client'

import type { AppRouter } from '../../api'

import { env } from './env'

export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `${env.API_URL}/trpc`,
    }),
  ],
})

page.tsx

export default async function ThoughtsPage() {
  async function handleSubmit(formData: FormData) {
    'use server'

    const content = formData.get('content')?.toString()
    const authorId = cookies().get('username')?.value

    if (!content || !authorId) return

    const newThought = await trpc.thought.create.mutate({
      content,
      authorId,
    })

    revalidateTag('thoughts')
  }

  return (
    <div className="p-4">
      <div className="mx-auto max-w-[1100px]">
        <form className="flex flex-col gap-2" action={handleSubmit}>
          <Textarea placeholder="Write your thought..." name="content" />

          <div className="flex justify-end">
            <Button type="submit">Submit</Button>
          </div>
        </form>
      </div>
    </div>
  )
}

[KevinEdry]

Which trpc version are you running?

[Mnigos]

nestjs app:

    "@trpc/server": "^11.0.0-rc.532",

nextjs app:

    "@trpc/client": "^11.0.0-rc.532",

[KevinEdry]

This library supports trpc 10, since 11 was still in preview when I stated development, and it seems like you are using a RC version which is never recommended for any production application.

Also the vast majority of trpc users uses the 10 version as of this moment.

Since TRPC 11 has some breaking changes between the two, specifically how you merge routers, I can't change the code to accommodate both, are you able to downgrade?

[Mnigos]

This library supports trpc 10, since 11 was still in preview when I stated development, and it seems like you are using a RC version which is never recommended for any production application.

Also the vast majority of trpc users uses the 10 version as of this moment.

Since TRPC 11 has some breaking changes between the two, specifically how you merge routers, I can't change the code to accommodate both, are you able to downgrade?

Sure, I will try to downgrade and let you know if it resolves my issue.

[Mnigos]

Similar error, but different message.

Error: No "mutation"-procedure on path "thought.create"

trpc.ts

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'

import type { AppRouter } from '../../api'

import { env } from './env'

export const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `${env.API_URL}/trpc`,
    }),
  ],
})

actions.ts

export async function createThought(content: string) {
  const { id: authorId } = await getCurrentUser()

  const newThought = await trpc.thought.create.mutate({
    content,
    authorId,
  })

  revalidateTag('thoughts')

  return newThought
}

thought.router.ts

@Router({ alias: 'thought' })
export class ThoughtRouter {
  constructor(private readonly prisma: PrismaService) {}

  @Mutation({ input: createThoughtSchema, output: thoughtSchema })
  async create(
    @Input('content') content: Thought['content'],
    @Input('authorId') authorId: Thought['authorId']
  ) {
    const { id } = await this.prisma.thought.create({
      data: {
        content,
        author: {
          connect: {
            id: authorId,
          },
        },
      },
    })

    return this.prisma.thought.findUnique({
      where: {
        id,
      },
      select: {
        id: true,
        content: true,
        author: true,
        createdAt: true,
      },
    })
  }
}

server.ts

import { initTRPC } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.create();
const publicProcedure = t.procedure;

const appRouter = t.router({
  thought: t.router({
    create: publicProcedure.input(thoughtSchema
      .pick({
        content: true,
      })
      .extend({
        authorId: z.string(),
      })).output(z.object({
        id: z.string(),
        content: z.string(),
        author: userSchema,
        createdAt: z.date(),
      })).mutation(async () => "PLACEHOLDER_DO_NOT_REMOVE" as any),
});
export type AppRouter = typeof appRouter;

trpc@10.45.2

[KevinEdry]

Found the issue, a PR is up, will be fixed once it's merged.

[Mnigos]

And now it works even with trpc v11.