}>\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!",[3034],{"name":3035,"color":3036},"๐ bug: unconfirmed","e99695",6266,"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.72204036,{"description":3043,"labels":3044,"number":3045,"owner":3025,"repository":3025,"state":3026,"title":3046,"updated_at":3039,"url":3047,"score":3048},"### 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.7263354,{"description":3050,"labels":3051,"number":3052,"owner":3025,"repository":3053,"state":3026,"title":3054,"updated_at":3055,"url":3056,"score":3057},"Hey there! We're writing an app that needs server-side events (it requires proxying events to an LLM like OpenAI). We're currently using trpc-openapi and love it; wondering if there's any way to keep our same architecture and add in SSE?\r\n\r\nThis is within a NextJS app.",[],429,"trpc-openapi","Support for server-side events?","2023-12-16T06:28:18Z","https://github.com/trpc/trpc-openapi/issues/429",0.74612916,{"description":3059,"labels":3060,"number":3062,"owner":3025,"repository":3025,"state":3026,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### Provide environment information\n\n```\nSystem:\n OS: macOS 15.4.1\n CPU: (16) arm64 Apple M4 Max\n Memory: 2.15 GB / 48.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 22.12.0 - ~/.volta/tools/image/node/22.12.0/bin/node\n npm: 10.9.0 - ~/.volta/tools/image/node/22.12.0/bin/npm\n pnpm: 10.5.1 - /opt/homebrew/bin/pnpm\n Browsers:\n Chrome: 136.0.7103.93\n Safari: 18.4\n npmPackages:\n @tanstack/react-query: catalog:tanstack => 5.75.5 \n @trpc/client: catalog:trpc => 11.1.2 \n @trpc/server: catalog:trpc => 11.1.2 \n react: catalog:react19 => 19.1.0 \n typescript: catalog: => 5.8.3 \n```\n\n### Describe the bug\n\nStarter doesn't work when deployed to Cloudflare. More specifically calling trpc on the loaders completely breaks the app and we get the following error:\n\n`Unexpected token '\u003C', \"\u003C!DOCTYPE html>\" is not valid JSON`\n\n### Link to reproduction\n\nhttps://github.com/trpc/trpc/tree/main/examples/tanstack-start\n\n### To reproduce\n\nDownload the trpc starter: https://github.com/trpc/trpc/tree/main/examples/tanstack-start\n\nChange `app.config.ts` with the `cloudflare-module` settings to deploy to Cloudflare Workers.\n\n`app.config.ts`\n\n```\nimport { defineConfig } from '@tanstack/start/config';\nimport tsConfigPaths from 'vite-tsconfig-paths';\nimport { cloudflare } from 'unenv';\nimport nitroCloudflareBindings from 'nitro-cloudflare-dev';\n\nexport default defineConfig({\n server: {\n preset: 'cloudflare-module',\n unenv: cloudflare,\n modules: [nitroCloudflareBindings],\n },\n vite: {\n plugins: [\n tsConfigPaths({\n projects: ['./tsconfig.json'],\n }),\n ],\n },\n});\n```\n\ncreate a `wrangler.jsonc` file.\n```\n{\n \"$schema\": \"node_modules/wrangler/config-schema.json\",\n \"name\": \"YOUR-WORKER-NAME\",\n \"main\": \".output/server/index.mjs\",\n \"compatibility_date\": \"2025-04-01\",\n \"compatibility_flags\": [\"nodejs_compat\"],\n \"assets\": {\n \"directory\": \".output/public\",\n },\n \"observability\": {\n \"enabled\": true,\n },\n}\n```\n\ngo to posts -> select a post -> refresh -> it crashes\n\n### Additional information\n\n_No response_\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[3061],{"name":3035,"color":3036},6755,"bug: tanstack start example not working","2025-05-09T18:19:37Z","https://github.com/trpc/trpc/issues/6755",0.747353,{"description":3068,"labels":3069,"number":3074,"owner":3025,"repository":3025,"state":3075,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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!",[3070,3073],{"name":3071,"color":3072},"โฎ needs reproduction","000055",{"name":3035,"color":3036},5837,"closed","bug: Sse calling it self even after completion","2025-03-20T15:42:28Z","https://github.com/trpc/trpc/issues/5837",0.6919705,{"description":3081,"labels":3082,"number":3084,"owner":3025,"repository":3025,"state":3075,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### 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!",[3083],{"name":3035,"color":3036},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.6970102,{"description":3090,"labels":3091,"number":3092,"owner":3025,"repository":3025,"state":3075,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### 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.7110293,{"description":3098,"labels":3099,"number":3100,"owner":3025,"repository":3025,"state":3075,"title":3101,"updated_at":3102,"url":3103,"score":3104},"### Describe the feature you'd like to request\r\n\r\nFollowing #3482 & coming over from https://github.com/typescript-eslint/typescript-eslint/issues/6760: typescript-eslint is soon going to release a new v6 major version with reworked configurations. You can read up on it here: [typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta](https://typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta)\r\n\r\nSpecifically, the [configurations are reworked](https://typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta#reworked-configuration-names) so that the recommended equivalents to what trpc uses now are:\r\n\r\n* `'plugin:@typescript-eslint/recommended-type-checked'`\r\n* `'plugin:@typescript-eslint/stylistic-type-checked'`\r\n\r\n### Describe the solution you'd like to see\r\n\r\nI can send a PR updating to them!\r\n\r\n### Describe alternate solutions\r\n\r\nI suppose trpc could stay on typescript-eslint@v5, or use its own bespoke lint configs... neither option seems very appealing to me. ๐ \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!",[],4540,"feat: Use typescript-eslint@v6 & its reworked configs","2025-03-20T15:41:45Z","https://github.com/trpc/trpc/issues/4540",0.71959627,{"description":3106,"labels":3107,"number":3110,"owner":3025,"repository":3025,"state":3075,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Area of Improvement\n\nWhen users click on the dropdown for selecting a version, the list is not displayed in the correct order. This can create confusion for users trying to choose a specific version.\n\n### Link to related docs\n\nhttps://trpc.io/\n\n### Additional information\n\n\r\n\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR implementing the suggested changes!",[3108,3109],{"name":3019,"color":3020},{"name":3022,"color":3023},5351,"docs: Incorrect Order of Version List in Dropdown","2025-03-20T15:42:12Z","https://github.com/trpc/trpc/issues/5351",0.7231258,["Reactive",3116],{},["Set"],["ShallowReactive",3119],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fM5x5_M1hi_6hR97w1I4O_22u10qgPte989IEnSRF6e0":-1},"/trpc/trpc/4343"]