404 TRPCError: no query procedure on path

Hi, this is my entire standalone tRPC server:

import { initTRPC } from "@trpc/server";
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

const t = initTRPC.create();
const appRouter = t.router({
    foo: t.procedure.query(() => "hi"),
});

const server = createHTTPServer({
    middleware: cors(),
    router: appRouter,
});

export type AppRouter = typeof appRouter;

server.listen(3000);

import { initTRPC } from "@trpc/server";
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

const t = initTRPC.create();
const appRouter = t.router({
    foo: t.procedure.query(() => "hi"),
});

const server = createHTTPServer({
    middleware: cors(),
    router: appRouter,
});

export type AppRouter = typeof appRouter;

server.listen(3000);

and here is my tRPC client:

const trpcClient = trpc.createClient({
    links: [
        httpBatchLink({
            url: "http://localhost:3000/trpc"
        }),
    ],
});

const trpcClient = trpc.createClient({
    links: [
        httpBatchLink({
            url: "http://localhost:3000/trpc"
        }),
    ],
});

but when i use it with trpc.foo.useQuery(), this the response:

{
    "error": {
        "message": "No \"query\"-procedure on path \"trpc/foo\"",
        "code": -32004,
        "data": {
            "code": "NOT_FOUND",
            "httpStatus": 404,
            "stack": "TRPCError: No \"query\"-procedure on path \"trpc/foo\"\n    at new TRPCError (/somepath/node_modules/@trpc/server/dist/TRPCError-6a1653a4.mjs:52:12)\n    at callProcedure
                  [...]
        }
    }
}

{
    "error": {
        "message": "No \"query\"-procedure on path \"trpc/foo\"",
        "code": -32004,
        "data": {
            "code": "NOT_FOUND",
            "httpStatus": 404,
            "stack": "TRPCError: No \"query\"-procedure on path \"trpc/foo\"\n    at new TRPCError (/somepath/node_modules/@trpc/server/dist/TRPCError-6a1653a4.mjs:52:12)\n    at callProcedure
                  [...]
        }
    }
}

What am i doing wrong? I already tried removing /trpc from the url that the client uses which also resulted in 404.

7 Replies

thomasplayschess•2y ago

Maybe the URL is just wrong? Try to change this url: "http://localhost:3000/trpc" to this: url: "http://localhost:3000" At least it looks to me like you are not setting it up on any path, so the default should just be http://localhost:3000

functionOP•2y ago

i did try that, i've already mentioned it ^^ maybe i didn't try without slash

thomasplayschess•2y ago

Is the server behind a reverse proxy? What do you get when you call http://localhost:3000/foo?

functionOP•2y ago

that can't be the issue, the response is clear no reverse proxy the request comes through but i'll check /foo when i'm back home not sure what to expect tho bc trpc isn't rest

thomasplayschess•2y ago

It should give you something like "400 Bad Request" and not a 404 if the path is correct.

functionOP•2y ago

@thomasplayschess yeah the issue was simply that i tried localhost:4321/ instead of localhost:4321 as the URL for the link. it works now :) thanks

thomasplayschess•2y ago

Awesome, glad I could help! 🙂

404 TRPCError: no query procedure on path

Did you find this page helpful?