Hono tRPC Server body issue

I have been trying to get Cloudflare Workers, Hono and tRPC working for tens of hours now.
I am using the

@hono/trpc-server

@hono/trpc-server

package which gives me middleware for trpc to run with hono. They even have an example with cloudflare workers and a d1 database, so I know it is possible to do what I am trying to do.

The problem I am having is that tRPC is not reading the body properly, or at all. Take this function as an example:

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

It never even gets to the mutation part at all because validation fails. Using errorFormatting with tRPC shows me that input is undefined when getting passed by postman, which is weird because I am definitely sending a title. It all worked before when I hadn't moved to Cloudflare Workers and before I was using the hono trpc-server package.

This is how I serve the app:

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

Here is some more context so you can understand my code a little better.

context.ts

context.ts

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

How can I get tRPC to start recognizing the input? The context and database queries work as intended, it's just the input that is not working.

Hono tRPC Server body issue

I have been trying to get Cloudflare Workers, Hono and tRPC working for tens of hours now.
I am using the

@hono/trpc-server

@hono/trpc-server

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

Here is some more context so you can understand my code a little better.

context.ts

context.ts

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

How can I get tRPC to start recognizing the input? The context and database queries work as intended, it's just the input that is not working.

Hono tRPC Server body issue

Similar Threads

Hono tRPC Server body issue

Similar Threads

Similar Threads

Similar Threads