Integrating hono.js with tRPC in Next.js: Routing and Context Considerations
I want to combine Hono.js with tRPC. I followed the guide on the 3rd party middleware made by hono for a tRPC server, and now I have set up the hono tRPC server 3rd party middleware similar to the code below:
```ts
import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'...
httpStreaming with NonJsonSerializable
i have a question lets say i have this
link setup to make httpStreaming work and also make NonJsonSerializable stuff work (formdata)
if in the mutation i return json it works perfectly but if i return an stream i get Cannot use stream-like response in non-streaming request which makes sense
but is there any way of making it work?...
server calls alongside new react integration
Started migrating to new react integration. Before that I used to have a react client and a caller for server side calls. Was following create-t3-turbo on how they migrated and it seems like they dont have a caller anymore. Was wondering if i should just continue using the caller for the server side calls or there's a new alternative that i dont know of
swagger to trpc-like interface generator?
I have a backend which exposes a fully detailed swagger json file. And I want to have an auto generated api client with an interface like trpc.
I managed to do it using
swagger-typescript-api and custom templates, but wondered if anyone did it already or if there is any open source project that does almost the same thing, so I can get better ideas for implementation.
Thanks...makeQueryClient missing default arguments
following documentation, the dehydrate & hydrate arguments are not valid when using makeQueryClient
Sending FormData does not work at all
https://github.com/trpc/trpc/blob/main/examples/minimal-content-types I have this exact same setup with tRPC but does not work. Server just says "Input not instance of FormData", looking at the network tab it just sends a json payload
Solution:
Got it working. Had to use
splitLink with a condition for isNonJsonSerializable
How would I go about passing an image to the server using tRPC?
I'm reviewing all my options here but I'm currently thinking of uploading the file and then the server uses the URL of the image to read.
I only need the image temporarily to read, so it just wouldn't make sense for me to upload it and just leave it in an s3 or r2 bucket.....
How to forward headers (cookies) w/ Tanstack Start
I followed the example repository to get up and running, but I can't seem to get cookie-based authentication to work during the ssr pass. Just doesn't look like the headers are being forwarded on to the fetch call. I tried attaching
...(typeof window === 'undefined' && headers: getHeaders()}) to the createTRPCClient call in router.tsx which works in dev and fails in build (probably because that function isn't supposed to b...Solution:
After playing around some more, I was able to simplify it to
```ts
const getIncomingHeaders = createIsomorphicFn()
.client(() => ({}))
.server(() => getHeaders());...
A simple example of using SSE and subscriptions
Hello! Congrats on launching v11 🚀 I'm having a hard time to understand subscriptions](https://trpc.io/docs/server/subscriptions), specially the full stack example which is already a bit complex. Just wondering if there is a simple example somewhere without using React for example and just a basic subscription when a todo item is added for example.
Also, is it just me or the
onComplete, onData, etc options in a plain subscription got removed and is only available in useSubscription()? The types from v10 have it https://github.com/trpc/trpc/blob/3bc06d055d3b860d978e9c465bce56fdcf95b71f/packages/client/src/internals/TRPCUntypedClient.ts#L32
Thanks!...tRPC v11 FileLike
Hey there, using stable version of v11 now and following the example (https://github.com/trpc/trpc/blob/main/examples/minimal-content-types/server/index.ts) throws some Typescript errors regarding the FileLike interface
Exported variable 'router' has or is using name 'FileLike' from external module "/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/contentTypeParsers" but cannot be named.
Node version: v20.17 using pnpm...Auth Headers in Singleton Pattern
The recommended approach for setting up a SPA with tRPC is to use the Singleton Pattern (source). However, many authentication libraries rely on providers and hooks to supply the authenticated user, meaning the
access_token is only accessible within React land.
Given this, what is the recommended method to include the access_token in the tRPC headers? Can this be achieved using the Singleton Pattern, or is it necessary to use TRPCProvider instead?...Use middleware on the router level
Is it possible to apply a middleware to the router level?
I have 4 routers and I would like to apply different middleware to each of them
```ts...
v11 types ProcedureBuilder & MiddlewareBuilder
You used to be able to import these types directly from
@trpc/server. With v11 you can only import them via unstable-core-do-not-import.
I have some properties on a class that should hold a t.middleware and a t.procedure. What's the recommended way to type my Middleware and Procedure in v11?
```ts...tRPC Monorepo w/ Package Path Aliases
Does anyone have a working example of tRPC's API router definitions in a package in a monorepo with path aliases working in that sub package? Something like
create-t3-turbo but with path aliases in that API sub package. I see Julius has setup a great monorepo example, however I see in all the packages he is only using relative imports.
Is this possible?...Doubled subscriptions in React with useSubscription
I've searched a bit but can't seem to find an answer:
When using useSubscription, I seem to get two subscriptions due to React strict mode. Is there a way to prevent this? I don't see an API for disposing of subscriptions when the component unmounts, so subscriptions only accumulate. But perhaps I'm doing something obviously wrong that I'm not catching? Here is the gist of the code I'm using:
```
function ChatIndexComponent() {...
NextJs trpcClient and merged router. But it is returning a html doc instead of json error.
I am new trpc, I am implementing a single
trpcClient and merged router,
in nextJs v15, app router.
When i implement trpc with api routes /api/v2/user/[user]/route.ts and utils/trpc nexbacthlink /api/v2/user. this code snippet is working fine.
...Solution:
Oh, I see now, I fixed the issue by adding
api/v2/[trpc]/route.ts. It working now with this.getting type error in the code from https://trpc.io/docs/client/react/server-components
Hey,
has something changed since the doc for server-components was written?
getting
```...
Type error when following guide TRPC React query: 'lazy' is declared here.
Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
Types of property '_def' are incompatible.
Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.
Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
Types of property '_def' are incompatible.
Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.
state change not triggering refetch
I have this query in my app:
```ts
const [filter, setFilter] = useState({
value: "",...