Support tRPC v11

[exKAZUu]

What is the problem this feature would solve?

The current elysia (1.1.0 of @elysiajs/trpc) seems not to support tRPC v11. If I just bump @trpc/server and @trpc/client from 10.45.2 to 11.0.0-rc.477, it causes the following error:

# Unhandled error between tests
-------------------------------
41 |     }
42 |     constructor(message, opts){
43 |         const cause = opts?.cause;
44 |         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
45 |         // @ts-ignore https://github.com/tc39/proposal-error-cause
46 |         super(message, {
             ^
TRPCClientError: No "query"-procedure on path "hello"
      at new TRPCClientError (.../node_modules/@trpc/client/dist/TRPCClientError.mjs:46:9)
      at from (.../node_modules/@trpc/client/dist/TRPCClientError.mjs:26:20)
      at .../node_modules/@trpc/client/dist/links/httpBatchLink.mjs:82:56
-------------------------------

If you need, I can create a repoduction repo.

What is the feature you are proposing to solve the problem?

Make @elysiajs/trpc support the latest tRPC (v11).

What alternatives have you considered?

No response

[exKAZUu]

I can confirm my app works well just by updating https://github.com/elysiajs/elysia-trpc/blob/main/package.json#L14-L15 to 11.0.0-rc.477. However, there are some type errors related to app.ws. (I just removed them because my app doesn't use ws ...)

[andrewgeorgemitchell]

I'm also running into the same issue when using v11

[brandon-schabel]

I ran into the issue as well, here's a React frontend with an Elysia server and a separate Express server that you can switch between to see the Elysia version errors: https://github.com/brandon-schabel/elysia-trpc-error

Hopefully it helps, thank you

[neocoder]

There's a workaround with tRPC fetch adapter

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
...
export const app = new Elysia()
    .use(
        cors({
            origin: process.env.ORIGIN?.split(','),
        }),
    )
       // not working 
       // .use(trpc(appRouter, { createContext }))

     .all('/trpc/*', async (opts) => {
        const res = await fetchRequestHandler({
            endpoint: '/trpc',
            router: appRouter,
            req: opts.request,
            createContext,
        })
        return res
     })

[vildantursic]

@neocoder Thanx for the workaround, it works but only if I send request via Postman, with my code I get 400 as bad request (Failed to parse body). Anyone know maybe what could cause that? It all worked fine at some point with v11 rc 200ish.