}>\r\n \u003CPhotoDetail id={params.id} isModal={false} />\r\n \u003C/Suspense>\r\n \u003C/HydrateClient>\r\n );\r\n}\r\n\r\n```\r\n\r\nClient Component Hook:\r\n\r\n```tsx\r\nexport function useGetPhotoById(id: string) {\r\n return trpc.photos.getPhotoById.useSuspenseQuery(id, {\r\n staleTime: 1000 * 60 * 5,\r\n gcTime: 1000 * 60 * 30,\r\n refetchOnMount: false,\r\n refetchOnWindowFocus: false,\r\n });\r\n}\r\n\r\n```\n\n### Additional information\n\n# Expected Behavior\r\n\r\nThe component should transition smoothly from Suspense fallback directly to the data without showing an empty screen in between.\r\n\r\n# Actual Behavior\r\n\r\nThe loading sequence is:\r\n\r\n1. Suspense fallback (skeleton)\r\n2. Empty screen\r\n3. Actual data\r\n\r\n# Additional Information\r\n\r\n- Using Next.js App Router\r\n- Following RSC patterns from tRPC documentation\r\n- Issue occurs consistently on initial load\r\n- Using latest tRPC RC version (11.0.0-rc.467)\r\n- Using latest React Query version (5.40.0)\r\n\r\nWould appreciate guidance on how to achieve a smooth transition from skeleton to data without the empty screen flash.\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[3019],{"name":3020,"color":3021},"🐛 bug: unconfirmed","e99695",6266,"trpc","open","Suspense fallback shows empty screen before data when using prefetch in Server Components","2025-03-20T15:42:44Z","https://github.com/trpc/trpc/issues/6266",0.69759274,{"description":3030,"labels":3031,"number":3032,"owner":3023,"repository":3023,"state":3024,"title":3033,"updated_at":3026,"url":3034,"score":3035},"### Describe the feature you'd like to request\n\nIt would be great to have a trpc link that supports the angular httpClient.\r\nThis would allow angular developers to use the usual interceptors to add headers and similar. Additionally it would also help in SSR use cases as the httpClient can cache requests so that they don't have to be repeated on the client.\n\n### Describe the solution you'd like to see\n\nI think ideally there is a kind of `Client` interface that can be implemented and then dropped into any of the existing links to make sure the requests are sent by the httpCLient.\n\n### Describe alternate solutions\n\nI think alternatively, a new link could be implmented that works with the httpClient.\r\nI tried to implement such a client and it seems to work so far. But since I could not understand the entire model of the current clients, I'm sure it lacks some features. I will paste it here as a reference anyways.\r\n```ts\r\nimport { inject, InjectionToken } from '@angular/core';\r\nimport type { AppRouter } from '@evorto/server/appRouter';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { CreateTRPCClient, createTRPCClient, TRPCLink } from '@trpc/client';\r\nimport type { AnyRouter } from '@trpc/server';\r\nimport { observable } from '@trpc/server/observable';\r\nimport superjson, { SuperJSONResult } from 'superjson';\r\n\r\nconst TRPC_CLIENT = new InjectionToken\u003CCreateTRPCClient\u003CAppRouter>>(\r\n 'TRPC_CLIENT',\r\n);\r\n\r\nexport interface AngularLinkOptions {\r\n url: string;\r\n}\r\n\r\nconst angularLink = (http: HttpClient) => {\r\n return \u003CTRouter extends AnyRouter>(\r\n opts: AngularLinkOptions,\r\n ): TRPCLink\u003CTRouter> => {\r\n return (runtime) =>\r\n ({ op }) =>\r\n observable((observer) => {\r\n const url = `${opts.url}/${op.path}`;\r\n switch (op.type) {\r\n case 'subscription':\r\n throw new Error('Subscriptions are not supported');\r\n case 'query': {\r\n http\r\n .get\u003C{\r\n result: { data: SuperJSONResult };\r\n }>(url, {\r\n params: {\r\n input: JSON.stringify(superjson.serialize(op.input)),\r\n },\r\n })\r\n .subscribe((res) => {\r\n const parsedResponse = superjson.deserialize(res.result.data);\r\n observer.next({\r\n result: {\r\n type: 'data',\r\n data: parsedResponse,\r\n },\r\n });\r\n observer.complete();\r\n });\r\n break;\r\n }\r\n case 'mutation': {\r\n http\r\n .post\u003C{\r\n result: { data: SuperJSONResult };\r\n }>(url, superjson.serialize(op.input))\r\n .subscribe((res) => {\r\n const parsedResponse = superjson.deserialize(res.result.data);\r\n observer.next({\r\n result: {\r\n type: 'data',\r\n data: parsedResponse,\r\n },\r\n });\r\n observer.complete();\r\n });\r\n break;\r\n }\r\n }\r\n });\r\n };\r\n};\r\n\r\nexport const provideTrpcClient = () => {\r\n return {\r\n provide: TRPC_CLIENT,\r\n useFactory: (http: HttpClient) => {\r\n const link = angularLink(http);\r\n return createTRPCClient\u003CAppRouter>({\r\n links: [link({ url: '/trpc' })],\r\n });\r\n },\r\n deps: [HttpClient],\r\n };\r\n};\r\n\r\nexport function injectTrpcClient() {\r\n return inject(TRPC_CLIENT);\r\n}\r\n```\n\n### Additional information\n\n_No response_\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],6260,"feat: Add a link that uses angulars httpCient","https://github.com/trpc/trpc/issues/6260",0.7325952,{"description":3037,"labels":3038,"number":3039,"owner":3023,"repository":3023,"state":3040,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### Describe the feature you'd like to request\r\n\r\nCurrently, when logging a router to the console, a mysterious error is shown to the console\r\n\r\n```ts\r\nexport const trpc = initTRPC.context\u003Ctypeof createContext>().create();\r\nconsole.log(trpc.router({}))\r\n```\r\n\r\n```txt\r\nerror: Uncaught (in promise) Error: Tried to access \"$types.name\" which is not available at runtime\r\n throw new Error(`Tried to access \"$types.${key}\" which is not available at runtime`);\r\n ^\r\n at https://esm.sh/v113/@trpc/server@10.11.0/deno/server.development.mjs:1064:15\r\n at Object.get (https://esm.sh/v113/@trpc/server@10.11.0/deno/server.development.mjs:120:14)\r\n at inspectFunction (ext:deno_console/02_console.js:389:13)\r\n at _inspectValue (ext:deno_console/02_console.js:709:14)\r\n at inspectValue (ext:deno_console/02_console.js:737:9)\r\n at inspectValueWithQuotes (ext:deno_console/02_console.js:854:14)\r\n at inspectRawObject (ext:deno_console/02_console.js:1237:13)\r\n at inspectObject (ext:deno_console/02_console.js:1414:36)\r\n at _inspectValue (ext:deno_console/02_console.js:719:14)\r\n at inspectValue (ext:deno_console/02_console.js:737:9)\r\n```\r\n\r\nI've encountered this error twice, and unfortunately, I forgot what caused it the second time around. Maybe this error message can be improved so other people don't make the same mistake as I did.\r\n\r\n### Describe the solution you'd like to see\r\n\r\nMaybe include something like `\"are you printing a router?\"` to the console\r\n\r\n### Describe alternate solutions\r\n\r\nNot improving the error message\r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],4119,"closed","feat: Improve Error message when logging router","2023-04-30T12:02:12Z","https://github.com/trpc/trpc/issues/4119",0.68765646,{"description":3046,"labels":3047,"number":3048,"owner":3023,"repository":3023,"state":3040,"title":3049,"updated_at":3050,"url":3051,"score":3052},"### Describe the feature you'd like to request\n\nI'm trying to chain a number of `experimental_standaloneMiddleware`s using `.use()` and trying to process `ctx` gradually. I can't get the types right.\n\n### Describe the solution you'd like to see\n\n```ts\r\nconst mw1 = experimental_standaloneMiddleware().create(...); // returns { ctx: { a, b } }\r\n\t\t\t\t\t\t\t\t\t\t\t\t// We should be able to access partial `ctx` of the procedure.\r\nconst mw2 = experimental_standaloneMiddleware\u003C{ ctx: { a: string } }>().create(({ ctx }) => ctx.a )\r\n```\r\n\r\nThis currently errors. Potentially related to #5047.\n\n### Describe alternate solutions\n\nIf there is any other way to achieve this right now please let me know. I don't think regular middleware works in theses situations either.\n\n### Additional information\n\nUsing T3 stack, Next.js\n\n### 👨👧👦 Contributing\n\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],5120,"feat: Use `ctx` values created by `experimental_standaloneMiddleware` inside another middleware after chaining them","2025-03-20T15:42:06Z","https://github.com/trpc/trpc/issues/5120",0.69616556,{"description":3054,"labels":3055,"number":3059,"owner":3023,"repository":3023,"state":3040,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Describe the feature you'd like to request\n\nI would like to suggest, that we might want to support the `.default({ ... })` option for zod schemas. I just tried, and unfortunately it's not working out of the box.\n\n### Describe the solution you'd like to see\n\nIt would be awesome to see it supported, to not spam the code with `??` or `||`\n\n### Desribe alternate solutions\n\nN/A\n\n### Additional information\n\n_No response_\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[3056],{"name":3057,"color":3058},"👻 invalid","e4e669",2831,"feat: support `.default(...)` option with zod","2025-03-20T15:41:29Z","https://github.com/trpc/trpc/issues/2831",0.69916576,{"description":3065,"labels":3066,"number":3070,"owner":3023,"repository":3023,"state":3040,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Describe the feature you'd like to request\r\n\r\nIt's currently pretty difficult to tell whether a subscription is actually connected and listening for events. To track the status of the connection you would have to handle these events yourself. It would be nice if there was an easier way to track the status of the subscription.\r\n\r\n### Describe the solution you'd like to see\r\n\r\nHave the useSubscription hook return the status of the connection.\r\n\r\n```tsx\r\nconst { status } = api.message.useSubscription();\r\n\r\nif (status !== 'connected') return \u003Cp>You are currently not connected to the server :(\u003C/p>;\r\n\r\nreturn \u003Cp>Connection active :D\u003C/p>;\r\n```\r\n\r\n### Describe alternate solutions\r\n\r\nCurrently to show the user they are not connected to the service I am tracking the online status of the device, but this is only loosely correlated to actual status of the connection. This means that it will always show that the service is available when the device is online even while our service is down.\r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[3067],{"name":3068,"color":3069},"✅ accepted-PRs-welcome","0052cc",5786,"feat: Make useSubscription return info about the subscription","2025-03-20T15:42:26Z","https://github.com/trpc/trpc/issues/5786",0.6991974,{"description":3076,"labels":3077,"number":3079,"owner":3023,"repository":3023,"state":3040,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Provide environment information\r\n\r\n```\r\n System:\r\n OS: Linux 6.7 Arch Linux\r\n CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor\r\n Memory: 54.47 GB / 62.71 GB\r\n Container: Yes\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 21.6.2 - /usr/bin/node\r\n Yarn: 4.0.2 - /usr/bin/yarn\r\n npm: 10.4.0 - /usr/bin/npm\r\n Watchman: 4.9.0 - /usr/bin/watchman\r\n Browsers:\r\n Chromium: 122.0.6261.69\r\n```\r\n\r\n### Describe the bug\r\n\r\nAfter sending 16kB of WebSocket messages via the `wsLink` using fastify on the backend, the backend can no longer process messages from that client.\r\n\r\nThis issue comes from both the hacky way of handling backpressure in `@fastify/websocket` (reported there: https://github.com/fastify/fastify-websocket/issues/289) and the improper way of accessing the `WebSocket` object in `@trpc/server`.\r\n\r\nhttps://github.com/trpc/trpc/blob/466e6ca1de358a2ce99a6a57d5711bb11a772371/packages/server/src/adapters/fastify/fastifyTRPCPlugin.ts#L66\r\n\r\nCreating an empty handler like this causes `Duplex` objects to be created while they aren't actually used, which leads in the underlying `WebSocket`s getting paused. `@fastify/websocket` has a way of handling that that is kind of broken and only works if using the recommended way of accessing the objects from the handler (that is left empty here).\r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/mat-sz/trpc-wslink-bug-reproduction\r\n\r\n### To reproduce\r\n\r\n1. Clone the repository.\r\n2. `yarn install`\r\n3. `yarn build`\r\n4. `yarn dev`\r\n5. Go to http://localhost:3000/\r\n6. Click the button and observe received/sent counts.\r\n\r\nThe button sends 8192 bytes worth of text, after two clicks, the further attempts result in no response (no errors either).\r\n\r\n### Additional information\r\n\r\nThe solution is to export the `connection` handler separately from `adapters/ws.ts` and use that instead of `applyWSSHandler`. I can submit a pull request here since I have a working version of this.\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [X] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[3078],{"name":3020,"color":3021},5530,"bug: When using wsLink and the fastify adapter, after 16kB of messages sent to the server no further messages are processed.","2025-03-20T15:42:17Z","https://github.com/trpc/trpc/issues/5530",0.70320696,{"description":3085,"labels":3086,"number":3091,"owner":3023,"repository":3023,"state":3040,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### Provide environment information\n\nI am using trpc with reactQuery, fastify as backend and React.js as frontend.\r\n\r\nhere is my backend code : \r\n\r\n```\r\nimport { protectedProcedure, router } from \"../context.trpc\";\r\nimport { observable } from \"@trpc/server/observable\";\r\nimport z from \"zod\";\r\n\r\nexport const newLinkAuditController = router({\r\n assessment: protectedProcedure\r\n .input(z.object({ count: z.number() }))\r\n .subscription(({ input }) =>\r\n observable\u003C{ msg: number }>((sub) => {\r\n let i = 0;\r\n const jut = setInterval(() => {\r\n if (i === input.count) {\r\n console.log(\"completed\");\r\n sub.complete();\r\n clearInterval(jut);\r\n } else {\r\n i++;\r\n sub.next({ msg: i });\r\n }\r\n }, 1000);\r\n })\r\n ),\r\n});\r\n```\r\n\r\nhere is my frontend-code\r\n```\r\nconst handleFormSubmit = async ({ url }: { url: string }) => {\r\n setIsLoading(true);\r\n const abc = trpcFetch.newLinkAudit.subscribe(\r\n {\r\n count: 9,\r\n },\r\n {\r\n onError: (err) => {\r\n console.log(err);\r\n },\r\n onComplete: () => {\r\n console.log(\"Done!!\");\r\n },\r\n onData: (data) => {\r\n console.log(data);\r\n },\r\n }\r\n );\r\n return;\r\n };\r\n```\r\n\r\n\r\n\r\n\n\n### Describe the bug\n\nAt start in my handleformsubmit i am using sse and it is calling it self again and again i am receiving data in the onData part in frontend but not able to console Done!! in onSubmit. it is calling it self again.\n\n### Link to reproduction\n\nsorry there is no link i have uploaded the code above\n\n### To reproduce\n\ni have provided the fastify backend and react frontend code above\n\n### Additional information\n\nThis was the problem\n\n### 👨👧👦 Contributing\n\n- [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[3087,3090],{"name":3088,"color":3089},"⏮ needs reproduction","000055",{"name":3020,"color":3021},5837,"bug: Sse calling it self even after completion","2025-03-20T15:42:28Z","https://github.com/trpc/trpc/issues/5837",0.71286124,{"description":3097,"labels":3098,"number":3102,"owner":3023,"repository":3023,"state":3040,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Area of Improvement\n\nNext.js starter with Prisma requires pnpm yet it list npm and yarn.\n\n### Link to related docs\n\nhttps://trpc.io/docs/example-apps\n\n### Additional information\n\n_No response_\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing the suggested changes!",[3099],{"name":3100,"color":3101},"📚 documentation / examples","0075ca",4083,"docs: Next.js starter with Prisma does not work without pnpm","2023-04-13T12:02:31Z","https://github.com/trpc/trpc/issues/4083",0.7147925,{"description":3108,"labels":3109,"number":3110,"owner":3023,"repository":3023,"state":3040,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Provide environment information\r\n\r\n System:\r\n OS: macOS 13.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 119.34 MB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm\r\n Browsers:\r\n Chrome: 109.0.5414.119\r\n Safari: 16.2\r\n npmPackages:\r\n @trpc/client: ^10.10.0 => 10.10.0 \r\n @trpc/server: ^10.10.0 => 10.10.0 \r\n typescript: ^4.3.5 => 4.7.4 \r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nTRPC client cannot build correctly. Build process exit with: \r\n\r\n```bash\r\nsrc/index.ts(4,14): error TS4023: Exported variable 'getClient' has or is using name 'SerializeObject' from external module \"/Users/aliver/workspace/repo/api-service/node_modules/.pnpm/@trpc+server@10.10.0/node_modules/@trpc/server/dist/shared/internal/serialize\" but cannot be named.\r\n```\r\n\r\n### Link to reproduction\r\n\r\nhttps://stackblitz.com/github/trpc/examples-next-minimal-starter\r\n\r\n### To reproduce\r\n\r\nThis is my code.\r\n```ts\r\nimport { type AppRouter } from './routers';\r\nimport { createTRPCProxyClient, httpLink } from '@trpc/client';\r\n\r\nexport const getClient = (url: string) =>\r\n createTRPCProxyClient\u003CAppRouter>({\r\n links: [httpLink({ url })],\r\n });\r\n\r\n```\r\n\r\n### Additional information\r\n\r\ntrpc version: v10.10.0\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[],3740,"bug: TRPC client cannot build correctly","2023-02-22T12:03:14Z","https://github.com/trpc/trpc/issues/3740",0.71778196,["Reactive",3116],{},["Set"],["ShallowReactive",3119],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX7Y-3VXS1ohW8pTyMjgrdjhx7yAtesiDzBfVpzmjuSs":-1},"/trpc/trpc-openapi/429"]