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.

[Trosterud]

+1

[DKeken]

+1

[divmgl]

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
})

Brilliant, this got me unblocked. Thank you.

tRPC 11 is becoming more relevant now with the new TanStack Query changes and the ongoing development on TanStack Query.

[nerdstep]

@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.

I was running into the same issue. I was using @bogeychan/elysia-logger middleware, but after removing that the requests started working. Haven't had time to investigate the issue yet, but seems like maybe the logger is somehow messing with the request??

[JasonHassold]

For me using .all() for the method was breaking it. I had to switch to .get() and .post()

[ortonomy]

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
})

How the hell did you even find this workaround? It's been driving me nuts for the last few hours.

I also don't get the issue. It's like tRPC only responds if its endpoint matches the req path?

[ortonomy]

If it helps people understand the cause of this error, or where the root might lie. I am reproducing this error under these conditions:

1. I have nested the trpc endpoint under /api/v1/trpc or at least /api/v1 is where I was mounting the trpc wrapper from Elysia:

import { trpc } from '@elysiajs/trpc'

// ...

const router = new Elysia({
  prefix: '/api/v1',
})

router.use(trpc(router, {  endpoint: '/trpc' })) // '/trpc' is the default!

export router

---

Here is the solution (from the workaround which works):

export default new Elysia({
  name: 'trpcEntryPoint'
}).all('trpc/*', async (opts) => {
  const res = await fetchRequestHandler({
    endpoint: '/api/v1/trpc',
    router: appTRPCRouter,
    req: opts.request,
    createContext: () => ({})
  })
  return res
})

---

I am convinced that this is a similar issue to this: elysiajs/elysia-openapi#183 (comment)

My working theory is that instead of using the current FULL PATH of the host as the endpoint value, it's just using the BARE PATH as the assumed FULL PATH.

However, setting endpoint to /api/v1/trpc also doesn't work. So maybe completely off

[papalardo]

To works I needed modify parser:

const elysiaTrpc = new Elysia()
  .all('/trpc/*', async (opts) => {
    const res = await fetchRequestHandler({
      endpoint: '/api/trpc',
      router,
      req: opts.request,
      createContext() {
        console.error('createContext')
        return {};
      },
    });

    return res;
  }, {
    parse: 'none'
  })