`\r\n or\r\n - Wrapping the main component (`\u003CComponent {...pageProps} />`) in a div\r\n\r\nor\r\n- see `pages/user/[userId].tsx`\r\n - comment out the prefetching (`await ssg.user.byUserId.prefetch({ userId })`)\r\n\r\nor\r\n- see `pages/index.tsx`\r\n - comment out fetching data on the client (`... trpc.user.byUserId.useQuery ...`)\r\n\r\n\r\nI still don't know why/where exactly the issue comes from. I can only assume that it has to do with hydration because the described changes above all have something to do with that (or with the page root).\r\n\r\n\r\n\r\n\r\n---\r\n\r\nNow it gets really weird:\r\n\r\nI tested & can reproduce this with two tRPC versions:\r\n- `10.0.0-proxy-beta.1`\r\n- `10.0.0-proxy-beta.12`\r\n- `10.0.0-proxy-beta.13`\r\n- `10.0.0-proxy-beta.18`\r\n\r\n\u003Cdetails>\r\n \u003Csummary>See old comment\u003C/summary>\r\n\r\n..but with the newest version (`10.0.0-proxy-beta.14`), this error does not occur anymore! \r\n\r\nI looked at the changes between version 13 and version 14, but can't find anything with my limited knowledge that is related to this behavior:\r\n\r\nhttps://github.com/trpc/trpc/compare/017ac71d5b0cc37d6c1fa22d03377a99a17b6dde...ce9c0196478070f2a6b81993470f0368bb0e1606\r\n\r\n(Maybe the [array path update](https://github.com/trpc/trpc/commit/1d187b11f83dade3a0e5643a66b3b4fe5974070c)?)\r\n\r\nNo idea whether something between 13 and 14 has fixed this or if the error message is somehow swallowed.\r\n\r\nI added install helpers in the reproduction repo, so you can switch versions easily, e.g. via `npm run install-12`.\r\n\u003C/details>\r\n\r\n\r\n\r\nUpdate: Since \"beta.14\", I think that prefetching [does not work anymore](https://github.com/trpc/trpc/issues/2923) - I guess that's why this issue does not exist in beta.14.\r\n\r\nUpdate no. 2: [I added a new route that uses `getServerSideProps`](https://github.com/bennettdams/trpc-10-unmounted-bug/commit/209588896d19557a484b3e88438c7221d51c1dc7) to the reproduction, where this error also occurs.\r\n\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [x] ๐โโ๏ธ Yes, if someone gives me a hint where to start ๐
",[3052,3055],{"name":3053,"color":3054},"๐ bug","d73a4a",{"name":3019,"color":3020},2919,"closed","bug: Hydration logic error when prefetching existing query in subroute (`v10` / Next.js)","2022-10-17T21:57:48Z","https://github.com/trpc/trpc/issues/2919",0.6142251,{"description":3063,"labels":3064,"number":3065,"owner":3025,"repository":3025,"state":3057,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Provide environment information\r\n\r\n```\r\n System:\r\n OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)\r\n Container: Yes\r\n Shell: 5.8 - /usr/bin/zsh\r\n Binaries:\r\n Node: 16.17.0 - /usr/bin/node\r\n npm: 8.15.0 - /usr/bin/npm\r\n npmPackages:\r\n @tanstack/react-query: ^4.9.0 => 4.9.0 \r\n @trpc/client: ^10.0.0-proxy-beta.13 => 10.0.0-proxy-beta.13 \r\n @trpc/next: ^10.0.0-proxy-beta.13 => 10.0.0-proxy-beta.13 \r\n @trpc/react: ^10.0.0-proxy-beta.13 => 10.0.0-proxy-beta.13 \r\n @trpc/server: ^10.0.0-proxy-beta.13 => 10.0.0-proxy-beta.13 \r\n next: 12.3.1 => 12.3.1 \r\n react: ^17.0.2 => 17.0.2 \r\n typescript: 4.8.4 => 4.8.4\r\n```\r\n\r\n### Describe the bug\r\n\r\nPrefetching via SSG Helpers is broken since `10.0.0-proxy-beta.14`.\r\nNo matter if you prefetch on the server or not, the query will be refetched on the client.\r\n\r\nSome particular change that maybe is responsible: https://github.com/trpc/trpc/commit/1d187b11f83dade3a0e5643a66b3b4fe5974070c\r\n\r\nThis change happened for beta.14, and the prefetching was still working in beta.13.\r\n\r\n\r\n\r\n\r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/bennettdams/trpc-10-unmounted-bug\r\n\r\n### To reproduce\r\n\r\n## Via reproduction repo :\r\n\r\n(the repo was created for another issue, but works for this issue as well)\r\n\r\nSteps:\r\n\r\n1. `npm i` (installs beta.13)\r\n2. `npm run dev`\r\n3. Go to \u003Chttp://localhost:3000/user/123>\r\n4. See in the devtools that the prefetched query is **not** fetched on the client.\r\n5. `npm install-14` (to install beta.14)\r\n6. Restart, `npm run dev`\r\n3. Go to \u003Chttp://localhost:3000/user/123>\r\n4. See in the devtools that the prefetched query **is** fetched on the client.\r\n\r\n\r\n\r\n\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 fixing this bug!",[],2923,"bug: Prefetching with SSG helpers still makes the query fetch on the client since beta.14 (`v10`)","2022-10-05T23:27:03Z","https://github.com/trpc/trpc/issues/2923",0.6575654,{"description":3071,"labels":3072,"number":3076,"owner":3025,"repository":3025,"state":3057,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Provide environment information\r\n\r\n```\r\nSystem:\r\n OS: macOS 12.5.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 93.27 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node\r\n Yarn: 1.22.19 - ~/Documents/dev/node_modules/.bin/yarn\r\n npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm\r\n Browsers:\r\n Brave Browser: 106.1.44.108\r\n Chrome: 105.0.5195.125\r\n Edge: 106.0.1370.42\r\n Firefox: 105.0.1\r\n Safari: 15.6.1\r\n npmPackages:\r\n @tanstack/react-query: ^4.8.0 => 4.10.3 \r\n @trpc/client: 10.0.0-proxy-beta.14 => 10.0.0-proxy-beta.14 \r\n @trpc/next: 10.0.0-proxy-beta.14 => 10.0.0-proxy-beta.14 \r\n @trpc/react: 10.0.0-proxy-beta.14 => 10.0.0-proxy-beta.14 \r\n @trpc/server: 10.0.0-proxy-beta.14 => 10.0.0-proxy-beta.14 \r\n next: 12.3.1 => 12.3.1 \r\n react: 18.2.0 => 18.2.0 \r\n typescript: 4.7.4 => 4.7.4 \r\n```\r\n\r\n### Describe the bug\r\n\r\nSince beta.14, queries called from `useQuery` use a new queryKey format - `[[\"router\",\"procedure\"],{\"foo\":\"bar\"}]`. However queries called from ssgHelpers still use the old queryKey format - `[\"router.procedure\",{\"foo\":\"bar\"}]`\r\n\r\nThis means that when trying to hydrate using the ssg helpers, it will not hydrate because as far as React Query is concerned they are two different queries.\r\n\r\nIt was introduced in this commit: https://github.com/trpc/trpc/commit/1d187b11f83dade3a0e5643a66b3b4fe5974070c\r\nAnd I think it needs to be fixed here: https://github.com/trpc/trpc/blob/df7b4e8f3a5d1d57a1dae719753c201ca8b20596/packages/react/src/ssg/ssgProxy.ts#L87\r\n\r\n\r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/c-ehrlich/trpc-querykey-bug\r\n\r\n### To reproduce\r\n\r\nclone the repo, `pnpm i`, `pnpm dev`\r\n\r\n1. open localhost:3000, you will see two different querykeys:\r\n - ssg helper uses `[\"example.hello\",{\"text\":\"from tRPC\"}]`\r\n - useQuery uses `[[\"example\",\"hello\"],{\"text\":\"from tRPC\"}]`\r\n\r\n2. downgrade all tRPC packages to 10.0.0-proxy-beta-13\r\n - now both ssg helper and useQuery use `[\"example.hello\",{\"text\":\"from tRPC\"}]`\r\n\r\n### Additional information\r\n\r\n\u003Cimg width=\"1081\" alt=\"image\" src=\"https://user-images.githubusercontent.com/8353666/195203396-f9daccea-9634-4412-88f9-eb6fa50b6b66.png\">\r\n\r\nHappy to work on fixing this bug, but also ok if a core maintainer just wants to get it done quick :)\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[3073],{"name":3074,"color":3075},"duplicate","cfd3d7",2984,"bug: useQuery / ssg helper queryKeys inconsistent since beta.14, breaks hydration","2022-10-26T12:02:45Z","https://github.com/trpc/trpc/issues/2984",0.6590801,{"description":3082,"labels":3083,"number":3087,"owner":3025,"repository":3025,"state":3057,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Area of Improvement\n\nIn the docs all prefetch calls are always `void`ed while the tanstack docs `await` them. This makes it difficult to find out how to block page load before trpc queries are finished, especially when looking for pages router-like behavior after making the switch to app router. \n\n### Link to related docs\n\nhttps://trpc.io/docs/client/tanstack-react-query/server-components\n\n### Additional information\n\nThere's a good chance I'm missing something here and there's a better way to fetch certain trpc queries server-side before the html is being rendered to avoid empty state. There is an extensive explanation of my struggles on discord: https://discord.com/channels/867764511159091230/1356650745956532409\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR implementing the suggested changes!",[3084],{"name":3085,"color":3086},"๐ documentation / examples","0075ca",6655,"docs: Apparent lack of awaited prefetch in docs","2025-05-26T19:52:47Z","https://github.com/trpc/trpc/issues/6655",0.6647542,{"description":3093,"labels":3094,"number":3099,"owner":3025,"repository":3025,"state":3057,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Provide environment information\r\n\r\n```\r\n System:\r\n OS: Linux 5.15 Manjaro Linux\r\n CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics\r\n Memory: 7.99 GB / 15.05 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node\r\n Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn\r\n npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm\r\n Browsers:\r\n Firefox: 105.0.3\r\n npmPackages:\r\n @tanstack/react-query: ^4.13.0 => 4.13.0 \r\n @trpc/client: ^10.0.0-rc.1 => 10.0.0-rc.1 \r\n @trpc/react-query: ^10.0.0-rc.1 => 10.0.0-rc.1 \r\n @trpc/server: ^10.0.0-rc.1 => 10.0.0-rc.1 \r\n react: 17.0.1 => 17.0.1 \r\n typescript: ~4.3.5 => 4.3.5 \r\n```\r\n\r\n### Describe the bug\r\n\r\nIt is currently not possible to run `@trpc/react-query` with TypeScript versions older than 4.5 ([see TS changelog](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names)). Upgrading to 4.5 fixes this issue.\r\n\r\nThe following is thrown when running `tsc` on TS 4.3:\r\n\r\n\r\n\r\n### Link to reproduction\r\n\r\nhttps://stackblitz.com/edit/github-pe2txe?file=src/main.ts\r\n\r\n### To reproduce\r\n\r\n1. Open the reproduction link\r\n2. Run `npm run tsc`\r\n3. See error\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 fixing this bug!",[3095,3096],{"name":3085,"color":3086},{"name":3097,"color":3098},"๐ป invalid","e4e669",3088,"bug: @trpc/react-query breaks in typescript \u003C 4.5","2022-12-09T12:02:03Z","https://github.com/trpc/trpc/issues/3088",0.6701483,{"description":3105,"labels":3106,"number":3107,"owner":3025,"repository":3025,"state":3057,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Provide environment information\n\n System:\r\n OS: Linux 6.0 Manjaro Linux\r\n CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz\r\n Memory: 41.34 GB / 62.44 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node\r\n Yarn: 1.22.15 - ~/.yarn/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm\r\n Browsers:\r\n Chromium: 110.0.5481.100\r\n Firefox: 110.0\r\n\n\n### Describe the bug\n\nWhen I try to pass `staleTime` to `prefetchInfinite` it has no effect when I do it according to the type declaration:\r\n```\r\nconst ctx = trpc.useContext();\r\n\r\nfunction prefetchMessages(chatId: string) {\r\n ctx.chat.getInfiniteMessages.prefetchInfinite(\r\n {\r\n chatId,\r\n limit: 10,\r\n },\r\n undefined,\r\n {\r\n staleTime: 99999999,\r\n },\r\n );\r\n }\r\n```\r\nHowever, when I pass query options as the 2nd parameter to `prefetchInfinite`, like so:\r\n```\r\n function prefetchMessages(chatId: string) {\r\n ctx.chat.getInfiniteMessages.prefetchInfinite(\r\n {\r\n chatId,\r\n limit: 10,\r\n },\r\n {\r\n staleTime: 99999999,\r\n },\r\n );\r\n }\r\n```\r\nthen I do get the expected behavior, and `staleTime` equal to 99999999 confirmed in React Query Devtools.\r\n\r\n\r\nSo it seems that the `prefetchInfinite` type declaration is incorrect.\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-zsez5i?file=src%2Fpages%2Findex.tsx\n\n### To reproduce\n\nIn the Stackblitz project, hover over the h1 header and notice that the query has expected staleTime, despite it being passed incorrectly according to the typing error.\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 fixing this bug!",[],3816,"bug: typing issue with prefetchInfinite helper wrapper","2023-03-13T00:05:37Z","https://github.com/trpc/trpc/issues/3816",0.67565453,{"description":3113,"labels":3114,"number":3116,"owner":3025,"repository":3025,"state":3057,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Provide environment information\n\n```\n System:\n OS: Linux 6.8 Debian GNU/Linux 12 (bookworm) 12 (bookworm)\n CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor\n Memory: 21.97 GB / 31.34 GB\n Container: Yes\n Shell: 5.2.15 - /bin/bash\n Binaries:\n Node: 20.19.0 - /usr/local/bin/node\n Yarn: 1.22.22 - /usr/local/bin/yarn\n npm: 10.8.2 - /usr/local/bin/npm\n pnpm: 10.4.1 - /usr/local/share/npm-global/bin/pnpm\n npmPackages:\n @tanstack/react-query: ^5.66.0 => 5.66.0 \n @trpc/client: 11.0.0 => 11.1.1 \n @trpc/server: 11.0.0 => 11.1.1 \n react: 19.1.0 => 18.3.1 \n typescript: 5.7.3 => 5.7.3 \n```\n\n### Describe the bug\n\nVersions of @tanstack/react-query above v5.66.0 breaks typing for the return type of getQueriesData.\n\nQuery\n```ts\nconst data = qc.getQueriesData(trpc.productionJob.getAllWithLocationInfinite.infiniteQueryFilter());\n```\n\nv5.74.7\n```ts\n(method) QueryClient.getQueriesData\u003Cunknown, any>(filters: any): [readonly unknown[], unknown][]\n```\n\nv5.66.0\n```ts\n(method) QueryClient.getQueriesData\u003Cunknown, WithRequired\u003CQueryFilters\u003CTRPCInfiniteData\u003C{\n cursor: number;\n locationId?: string | undefined;\n searchTerm?: string | undefined;\n showCompleted?: boolean | undefined;\n showScannedJobsOnly?: boolean | undefined;\n showHighPriorityOnly?: boolean | undefined;\n showProjectType?: \"project\" | ... 2 more ... | undefined;\n projectName?: string | undefined;\n sort?: {\n ...;\n }[] | ... 1 more ... | undefined;\n limit: number;\n}, WithPagination\u003C...>>, TRPCClientErrorLike\u003C...>, TRPCInfiniteData\u003C...>, TRPCQueryKey & {\n ...;\n}>, \"queryKey\">, TRPCInfiniteData\u003C...>>(filters: WithRequired\u003C...>): [...][]\n```\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-gmrngrft?file=src%2Fpages%2Findex.tsx\n\n### To reproduce\n\nCheck the type in repo for `qc.getQueriesData`.\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!",[3115],{"name":3022,"color":3023},6730,"bug: TanStack Query above 5.66.0 breaks data return types","2025-04-29T06:37:45Z","https://github.com/trpc/trpc/issues/6730",0.6766804,["Reactive",3122],{},["Set"],["ShallowReactive",3125],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fvY0Ub4TwL-9pdpWVdOcpU0ua9eveUMX_fgcNhC8HJIo":-1},"/trpc/trpc/6740"]