No "query"-procedure on path "trpc/hello"

[mohitxskull]

TRPC routes are there but still getting 404

TURBOREPO

src/trpc/init.ts

import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
import { ZodError } from 'zod';

const t = initTRPC.create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

export const publicProcedure = t.procedure;

export const TRPCRouter = t.router;

src/trpc/index.ts

import { z } from 'zod';
import { publicProcedure, TRPCRouter } from './init';

export const appRouter = TRPCRouter({
  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
    return `Hello ${input ?? 'World'}!`;
  }),

  got: publicProcedure.query(() => {
    return `Hello 'World'!`;
  }),

  nest: TRPCRouter({
    hello: publicProcedure.input(z.string()).query(({ input }) => {
      return `Hello ${input}!`;
    }),
  }),
});

export type AppRouter = typeof appRouter;

src/index.ts

import { Hono } from 'hono';
import { trpcServer } from '@hono/trpc-server';
import { serve } from '@hono/node-server';
import { renderTrpcPanel } from 'trpc-panel';
import { compress } from 'hono/compress';
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';
import { appRouter } from './trpc';
import { env } from './env';

const app = new Hono();

app.use('*', cors());
app.use('*', compress());
app.use('*', logger());

console.log('Starting server...');

console.log({
  env,
});

app.get('/panel', (c) => {
  return c.html(
    renderTrpcPanel(appRouter, {
      url: 'http://localhost:9879/back/trpc',
      transformer: 'superjson',
    })
  );
});

app.use(
  '/back/trpc/*',
  trpcServer({
    router: appRouter,
  })
);

serve({
  fetch: app.fetch,
  port: 9879,
});

{
  "name": "goat",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "start": "tsx src/index.ts",
    "dev": "tsx watch src/index.ts"
  },
  "dependencies": {
    "@hono/node-server": "^1.1.1",
    "@hono/trpc-server": "^0.1.0",
    "@prisma/client": "^5.3.1",
    "@trpc/server": "^10.38.3",
    "dotenv": "^16.3.1",
    "envalid": "^7.3.1",
    "hono": "^3.6.0",
    "next-auth": "^4.23.1",
    "superjson": "^1.13.1",
    "trpc-panel": "^1.3.4",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@types/node": "^20.6.2",
    "prisma": "^5.3.1",
    "tsx": "^3.12.2",
    "typescript": "^5.2.2"
  }
}

Thank you!

[andrew-bierman]

I'm running into the same error with a similar set up as you, could you share your solution if you don't mind ?

[billyjacoby]

I'm hitting this same issue now, what was the resolution here?

[nordowl]

Commenting here as I just ran into the same issue. Just finished setting up Hono with tRPC and my procedure throws a 404 for whatever reason. What I did was change the base path of tRPC:

// Does not work
app.use(
    "/v1",
    trpcServer({
        router: trpcRouter,
        createContext
    })
)

// Works, yay
app.use(
    "/trpc/*",
    trpcServer({
        router: trpcRouter,
        createContext
    })
)

[luiisca]

I ran into the same issue and spent some time digging into the source code for both @hono/trpc-server and @trpc/server. It turns out the reason only the /trpc/* route works is because the internal fetchRequestHandler fn expects an endpoint to extract the procedure path correctly. The default is /trpc, so if your route is different, it breaks. To fix it, just pass an endpoint argument matching your middleware route

app.use(
    '/back/trpc/*',
    trpcServer({
        endpoint: '/back/trpc',
        router: appRouter,
    })
);