}>\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!",[2921],{"name":2922,"color":2923},"๐ 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.64857507,{"description":2932,"labels":2933,"number":2938,"owner":2925,"repository":2925,"state":2939,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### 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!",[2934,2937],{"name":2935,"color":2936},"โฎ needs reproduction","000055",{"name":2922,"color":2923},5837,"closed","bug: Sse calling it self even after completion","2025-03-20T15:42:28Z","https://github.com/trpc/trpc/issues/5837",0.6278977,{"description":2945,"labels":2946,"number":2953,"owner":2925,"repository":2925,"state":2939,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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!",[2947,2950],{"name":2948,"color":2949},"๐ documentation / examples","0075ca",{"name":2951,"color":2952},"โ
accepted-PRs-welcome","0052cc",5351,"docs: Incorrect Order of Version List in Dropdown","2025-03-20T15:42:12Z","https://github.com/trpc/trpc/issues/5351",0.67262244,{"description":2959,"labels":2960,"number":2961,"owner":2925,"repository":2925,"state":2939,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### 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,"feat: Improve Error message when logging router","2023-04-30T12:02:12Z","https://github.com/trpc/trpc/issues/4119",0.6789106,{"description":2967,"labels":2968,"number":2969,"owner":2925,"repository":2925,"state":2939,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### 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.6935033,{"description":2975,"labels":2976,"number":2978,"owner":2925,"repository":2925,"state":2939,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Area of Improvement\n\nWhen users use valibot, the tRPC documentation guides them to use `@decs/typeschema` for wrap, but in reality, this is redundant. The typeschema library is very complex, and if the project is built with the goal of creating a cloudflare worker, it will also cause a series of problems. I think the typeschema should be removed from the documentation, and instead, the user should be told to provide a validate function:\r\n\r\n```tsx\r\n// valibot-trpc.ts\r\nimport type { BaseSchema } from 'valibot'\r\nimport * as v from 'valibot'\r\n\r\nexport const validate = \u003CT extends BaseSchema>(schema: T) => \r\n (input: unknown) => v.parse(schema, input)\r\n\r\n// router.ts\r\nprotectedProcedure.input( validate(v.object( {} ) ).query( ( { input } ) => { ... } )\r\n```\n\n### Link to related docs\n\n_No response_\n\n### Additional information\n\n\u003Cimg width=\"1239\" alt=\"image\" src=\"https://github.com/trpc/trpc/assets/1720349/53fe9b5c-fa7e-4486-ba04-c0d62d9ace94\">\r\n\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [x] ๐โโ๏ธ Yes, I'd be down to file a PR implementing the suggested changes!",[2977],{"name":2948,"color":2949},5460,"docs: valibot + @decs/typeschema is unnecessary","2025-03-20T15:42:14Z","https://github.com/trpc/trpc/issues/5460",0.69770193,{"description":2984,"labels":2985,"number":2987,"owner":2925,"repository":2925,"state":2939,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 13.5.2\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 271.91 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node\r\n Yarn: 3.6.3 - ~/.nvm/versions/node/v18.16.0/bin/yarn\r\n npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm\r\n Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 116.0.5845.187\r\n Safari: 16.6\r\n```\n\n### Describe the bug\n\nWe've seen sporadic error reports in our React Native app of `Cannot read property 'message' of undefined` during construction of a `TRPCClientError`.\r\n\r\nHere's a screenshot from Sentry:\r\n\r\n\u003Cimg width=\"600\" alt=\"image\" src=\"https://github.com/trpc/trpc/assets/712727/c6320116-84b4-4e15-bf9d-67bb4bcd06a2\">\r\n\n\n### Link to reproduction\n\nN/A\n\n### To reproduce\n\nThis occurs sporadically and thus far we've been unable to reproduce this bug reliably in development.\n\n### Additional information\n\n_No response_\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[2986],{"name":2922,"color":2923},4794,"bug: sporadic `Cannot read property 'message' of undefined` when constructing `TRPCClientError`","2025-03-20T15:41:55Z","https://github.com/trpc/trpc/issues/4794",0.6983866,{"description":2993,"labels":2994,"number":3000,"owner":2925,"repository":2925,"state":2939,"title":3001,"updated_at":3002,"url":3003,"score":3004},"### Provide environment information\n\n```\nSystem:\n OS: macOS 15.3\n CPU: (8) arm64 Apple M2\n Memory: 2.18 GB / 24.00 GB\n Shell: 3.2.57 - /bin/sh\n Binaries:\n Node: 22.12.0 - /usr/local/bin/node\n npm: 11.0.0 - /usr/local/bin/npm\n pnpm: 9.15.4 - /usr/local/bin/pnpm\n Browsers:\n Brave Browser: 132.1.74.48\n Safari: 18.3\n npmPackages:\n @tanstack/react-query: ^5.65.1 => 5.65.1 \n @trpc/client: 11.0.0-rc.730 => 11.0.0-rc.730+776d07336 \n @trpc/react-query: 11.0.0-rc.730 => 11.0.0-rc.730+776d07336 \n @trpc/server: 11.0.0-rc.730 => 11.0.0-rc.730+776d07336 \n next: 15.1.6 => 15.1.6 \n react: ^19.0.0 => 19.0.0 \n typescript: ^5 => 5.7.3 \n```\n\n### Describe the bug\n\nHello, I build nextjs application with trpc. I use use `useSuspenseQuery` on my project for fetching data on client component-\n\n```\n\"use client\"\nimport { useState, ReactNode } from \"react\";\nimport { QueryClient, QueryClientProvider, isServer } from \"@tanstack/react-query\";\nimport { httpBatchLink } from \"@trpc/client\";\n\n//Client\nimport { trpc } from \"./client\";\n\n\n//Query Client\nimport { makeQueryClient } from \"./query-client\";\n\nlet clientQueryClientSingleton: QueryClient;\nconst getQueryClient = () => {\n if (isServer) {\n return makeQueryClient();\n }\n return (clientQueryClientSingleton ??= makeQueryClient());\n}\n\nconst getUrl = () => {\n const base = (() => {\n if (typeof window !== \"undefined\") return '';\n return \"https://new-dashboard-ivory.vercel.app\";\n })();\n return `${base}/api/trpc`;\n}\n\nconst Provider = ({ children }: { children: ReactNode }) => {\n const queryClient = getQueryClient();\n const [trpcClient] = useState(() =>\n trpc.createClient({\n links: [\n httpBatchLink({\n url: getUrl(),\n }),\n ],\n }),\n );\n\n return (\n \u003Ctrpc.Provider client={trpcClient} queryClient={queryClient}>\n \u003CQueryClientProvider client={queryClient}>\n {children}\n \u003C/QueryClientProvider>\n \u003C/trpc.Provider>\n );\n}\n\nexport default Provider;\n```\n\nQuery Client-\n\n```\nimport { defaultShouldDehydrateQuery, QueryClient } from \"@tanstack/react-query\";\n\nexport function makeQueryClient() {\n return new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: 30 * 1000,\n },\n dehydrate: {\n shouldDehydrateQuery: (query) =>\n defaultShouldDehydrateQuery(query) ||\n query.state.status === \"pending\",\n },\n },\n });\n}\n```\n\n\nHere is my Provider-\n\nconst [data] = trpc.unavailability.getDates.useSuspenseQuery();\n\n\nI am seeing it work on development phase. But When I try to build the application-\n\nIt throwing -\n\nError occurred prerendering page \"/unavailability\". Read more: https://nextjs.org/docs/messages/prerender-error\nTRPCClientError: No procedure found on path \"unavailability.getDates\"\n\n\nHow can I solve this?\n\n### Link to reproduction\n\nnone\n\n### To reproduce\n\nI test it again and again. When I am using `useQuery`, it do not gives any error. But When I am using `useSuspenseQuery` it showing the error.\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!",[2995,2998,2999],{"name":2996,"color":2997},"๐ป invalid","e4e669",{"name":2935,"color":2936},{"name":2922,"color":2923},6444,"bug: Production build failed when trying use useSuspenseQuery?","2025-02-06T18:02:14Z","https://github.com/trpc/trpc/issues/6444",0.7037866,{"description":3006,"labels":3007,"number":3011,"owner":2925,"repository":2925,"state":2939,"title":3012,"updated_at":3013,"url":3014,"score":3015},"### Provide environment information\n\n\r\n\r\n System:\r\n OS: macOS 14.4.1\r\n CPU: (12) arm64 Apple M3 Pro\r\n Memory: 3.97 GB / 36.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node\r\n Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn\r\n npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm\r\n pnpm: 9.0.3 - ~/.nvm/versions/node/v20.12.2/bin/pnpm\r\n Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 124.0.6367.62\r\n Safari: 17.4.1\r\n\r\n\n\n### Describe the bug\n\n\u003Cimg width=\"1313\" alt=\"image\" src=\"https://github.com/trpc/trpc/assets/1499188/3eadeb2e-b316-4a05-bc35-b35312e01ef6\">\r\n\n\n### Link to reproduction\n\nhttps://stackblitz.com/~/github.com/ravshansbox/trpc-demo\n\n### To reproduce\n\n`npm start`\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!",[3008],{"name":3009,"color":3010},"๐ bug","d73a4a",5650,"bug: Cannot find module '@web3-storage/multipart-parser'","2025-03-20T15:42:22Z","https://github.com/trpc/trpc/issues/5650",0.70570856,{"description":3017,"labels":3018,"number":3019,"owner":2925,"repository":2925,"state":2939,"title":3020,"updated_at":3021,"url":3022,"score":3023},"### Describe the feature you'd like to request\r\n\r\nWhen using batched requests, the response time is limited by the slowest request of the batch. This feature request is to investigate the feasibility of out-of-order response streaming so that the fastest responses come in first.\r\n\r\n### Describe the solution you'd like to see\r\n\r\nCurrently a batch response looks like this:\r\n```json\r\n[{\"result\":{\"data\":{\"json\":{\"foo\": 1}}}},{\"result\":{\"data\":{\"json\":{\"bar\": 2}}}}]\r\n```\r\n\r\nThough it could be rearranged into\r\n```json\r\n[\r\n{\"result\":{\"data\":{\"json\":{\"foo\": 1}}}},\r\n{\"result\":{\"data\":{\"json\":{\"bar\": 2}}}}\r\n]\r\n```\r\nwhich remains a valid JSON, but can now be parsed line by line.\r\n\r\nIf we take this a step further, the following will, for all intents and purposes, be equivalent:\r\n```json\r\n{\r\n\"1\":{\"result\":{\"data\":{\"json\":{\"bar\": 2}}}},\r\n\"0\":{\"result\":{\"data\":{\"json\":{\"foo\": 1}}}}\r\n}\r\n```\r\n\r\nWhich could be treated as a stream parsed line-by-line on the client:\r\n\r\n```js\r\n\tawait response.body\r\n\t\t.pipeThrough(new TextDecoderStream('utf-8'))\r\n\t\t.pipeThrough(new ChunksToLinesStream())\r\n\t\t.pipeThrough(new LineToObjectStream())\r\n\t\t.pipeTo(actionnableSink)\r\n```\r\ncode example from \r\nhttps://github.com/Sheraff/partial-json-stream/blob/1bea84df3d0ff7c6b5177443a00b9945ad8b0aff/js/script.js#L26-L30\r\n\r\nSince tRPC in batch mode doesn't rely on HTTP status codes (except for the `207`), but uses its own internal error system, adding the downside of a stream โ that you can't know the final status of your response before you're done sending it โ doesn't seem like a big issue.\r\n\r\nThis would require for the response to be\r\n- serialized request by request, instead of everything together at the end\r\n- flushed to a streamed response after every request finishes\r\n\r\nAnd for the client to\r\n- handle the response as a stream, decode it and chunk it into individual lines\r\n- parse out the index `\"1\":` and the optional trailing comma `,`\r\n- deserialize line by line, and update the react-query cache as soon as a response is ready\r\n\r\nThe performance implication of using JS streams instead of letting the browsers use their native methods should be considered. The example I'm referring to here (https://github.com/Sheraff/partial-json-stream) was written by me so I don't think it's close to optimal, but it is much slower than a simple `await response.json()` for all but the biggest jsons. However this doesn't take into account the possible slowness server-side (for example, when some requests do filesystem or database stuff).\r\n\r\n### Describe alternate solutions\r\n\r\nThe alternative is to leave it as is. **It already works wondrously well**. In any case, even though this feature request still proposes that we send a valid json, the (potential) resulting solution should still be opt-in, probably in the form of an alternative to the `httpBatchLink`.\r\n\r\n### Additional information\r\n\r\nI'd be down to work on this if there is interest, and if someone can point me to the right files in the trpc codebase (like where does the awaiting, serialization and deserialization take place).\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR implementing this feature!\n\n\u003Csub>[TRP-35](https://linear.app/trpc/issue/TRP-35/feat-out-of-order-batch-response-streaming)\u003C/sub>",[],4343,"feat: out-of-order batch response streaming","2025-03-20T15:41:40Z","https://github.com/trpc/trpc/issues/4343",0.70716643,["Reactive",3025],{},["Set"],["ShallowReactive",3028],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdItLWaAhn2hZNt1510ZgfUhEaWKTZRdecHv8DGsq1KY":-1},"/trpc/trpc/6260"]