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: "",...
AppRouter nested routers/procedures are any when imported in monorepo
(11.0.0-rc.828) Nested routers or procedures have 'any' types when imported in monorepo (vite, trpc). See utils router in the photo. I am wondering is it some tsconfig madness?
Typescript: 5.7.2 through all apps...
Solution:
fixed, needed to add
composite: true in the api package as it was both used in web app for types and in api app.
What are the best practices for keeping TRPC and ts-server fast?
I decided to migrate my entire app to TRPC over a couple days as I identified it was a great solution for my use case. However, now my typescript auto-complete and typing checking appear to be much slower.
I think TRPC is still the best solution, I'm just curious if there are good practices to follow to ensure that my ts-server stays fast as I scale even further. ts-go may help with this in the future, but for now I'm stuck waiting a few seconds for intellisense. Anyone have any resources I can review?...
Weird data type when extending context in fetch adapter
Environment:
* pnpm
* Vite react SPA
* Node v22.11.0
* tRPC server and client version: 11.0.0-rc.828...
Solution:
Well, in case anyone sees this I managed to figure it out. When starting a new CF project with the react framework template it creates an additional tsconfig (to the three existing ones from vite). This config (
tsconfig.worker.json) references the following types:
```json
"types": [
"@cloudflare/workers-types/2023-07-01",
"./worker-configuration.d.ts",...FormData TRPCClientError
Hi i have this error in my client : ```createFormControl.ts:1217 Uncaught (in promise) TRPCClientError: [
{
"code": "invalid_type",
"expected": "string",
"received": "undefined",...
Private chat with TRPC
Hi
I'm relatively new to tRPC and I'm currently trying to implement private chat rooms (1:1 conversations or small groups). I’ve checked out the tRPC SSE chat example https://github.com/trpc/examples-next-sse-chat, but it seems to be designed more for public chat rooms.
Could someone please point me in the right direction or share some tips on how to structure private conversations using tRPC ? ( atm, I manually check for each operation whether the user is part of the room, but I don't find this approach very intuitive. )...
Router type = any in monorepo...
Using typescript 5.8.2, trpc 11.0.0-rc.688
I have my server and frontend in separate packages, and when importing the AppRouter (
import type { AppRouter } from 'api') , the type of AppRouter is any :/.
I've followed all the steps from the FAQ, but to no avail....Solution:
SOLVED!!
The problem was the use of path aliases in the api. I changed an import ... from "@/..." to import ... from "../..." and it started working....
Creating Service Layer in Next App Router
I have a NextJS application that was built with the t3 stack a few years ago on the pages router. I am finally getting around to migrating to the app router and am running into some confusion. TLDR: I would like to build a service layer (basically just a set of functions) to call trpc endpoints that can be reused/called from both my server and client components.
I followed the "Set up with React Server Components" on the trpc v11 docs, and it looks like there are essentially 2 "instances" of trpc that are created, 1 for client components and 1 for server components (
trpc/client.tsx and trpc/server.tsx, respectively). Since each of these has a unique way of interacting with the trpc endpoint, and the server.tsx file is "server-only" and cant be used in my client components, I'm not sure how I can go about making a service layer that is reused between client and server components.
My existing service layer handled the trpc call as well as other conversions to FE models, so I would really like to avoid duplicating this work from client and server components if possible. Does anyone know how I can achieve this?...Stream closed, but it returns the actual data
So I have this procedure that simply returns a list of objects from db:
```js
getAllHabits: protectedProcedure.query(({ ctx }) => {
if (!ctx.session.user.id) return [];
// return []...
Cannot set headers after they are sent to the client
I have used login system from this repo https://github.com/itsrakeshhq/finance-tracker/tree/main/backend/src/modules/auth but reworked it to tRPC v11 (11.0.0-rc.824). I changed nothing regarding logic, only stuff regarding new version of tRPC and also i am using tRPC standalone not express. Now I have issue when i try to set cookies in authRouter.login
```
const authRouter = router({
login: publicProcedure...