\r\n\n\n### Additional information\n\nI'm wondering if there is any reason to not use httpBatchStreamLink and just send my data via a generator function and not use the subscription concept at all. The http stream links should be very similar to SSE subscription?\r\n\r\n```\r\n iterable: publicProcedure.query(async function* () {\r\n for await (const _ of Array(10).keys()) {\r\n yield Math.random().toString()\r\n await new Promise((resolve) => setTimeout(resolve, 100))\r\n }\r\n }),\r\n```\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[3093],{"name":3094,"color":3095},"๐ป invalid","e4e669",6391,"bug: SSE subscription fails when completing the subscription","2025-01-21T06:02:16Z","https://github.com/trpc/trpc/issues/6391",0.7846914,{"description":3102,"labels":3103,"number":3108,"owner":3022,"repository":3022,"state":3050,"title":3109,"updated_at":3110,"url":3111,"score":3112},"Maybe we should disable hover completely?\r\n\r\n---\r\n\r\ncc @KATT Generally this looks very cool and helpful, however, is there any configuration option for this? IMO kind of annoying that every single keyword exposes a \"big menu\". \r\n\r\n\r\nThese stuff seems kinda useless for our documentation\r\n\u003Cimg width=\"305\" alt=\"CleanShot 2022-08-18 at 21 25 36@2x\" src=\"https://user-images.githubusercontent.com/51714798/185477859-769360af-d65e-48cc-ba0d-17dde3a5f025.png\">\r\n\r\n\r\nWould prefer it only displaying types where we choose to display them, like \r\n\u003Cimg width=\"576\" alt=\"CleanShot 2022-08-18 at 21 24 28@2x\" src=\"https://user-images.githubusercontent.com/51714798/185477609-f2ca7161-0318-434d-abfe-18181d11dffd.png\">\r\n\r\nand the autocomplete highlighting also looks really good and showcases useful functionality.\r\n\u003Cimg width=\"403\" alt=\"CleanShot 2022-08-18 at 21 24 44@2x\" src=\"https://user-images.githubusercontent.com/51714798/185477651-fff2e751-d7bc-4f81-b5fb-9eadbd3c480f.png\">\r\n\r\n_Originally posted by @juliusmarminge in https://github.com/trpc/trpc/issues/2481#issuecomment-1219866316_",[3104,3105],{"name":3047,"color":3048},{"name":3106,"color":3107},"๐ธ www","666FF9",2499,"Less noisy shiki twoslash","2022-10-04T00:18:14Z","https://github.com/trpc/trpc/issues/2499",0.7853774,{"description":3114,"labels":3115,"number":3116,"owner":3022,"repository":3022,"state":3050,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 12.5.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 499.39 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: 103.1.41.100\r\n Chrome: 104.0.5112.101\r\n Edge: 105.0.1343.27\r\n Firefox: 104.0.1\r\n Safari: 15.6.1\r\n npmPackages:\r\n @trpc/client: ^9.27.2 => 9.27.2\r\n @trpc/next: ^9.27.2 => 9.27.2\r\n @trpc/react: ^9.27.2 => 9.27.2\r\n @trpc/server: ^9.27.2 => 9.27.2\r\n next: 12.2.5 => 12.2.5\r\n react: 18.2.0 => 18.2.0\r\n react-query: ^3.39.2 => 3.39.2\r\n```\n\n### Describe the bug\n\nWhen using loggerLink in a newly scaffolded create-t3-app, it logs a failed query on each page load, followed by a successful query. However only one network request is made.\r\n\r\nThis only happens in dev, not in prod, even if the loggerLink is active there.\r\n\r\nRelated issue from create-t3-app: https://github.com/t3-oss/create-t3-app/issues/390\n\n### To reproduce\n\nhttps://github.com/c-ehrlich/loggerlink-bugreport (it's just a stock create-t3-app@latest)\r\n```\r\nnpm i\r\nnpx prisma db push\r\nnpm run dev\r\n```\r\nOpen `http://localhost:3000`, look in the console\n\n### Additional information\n\n- No network requests are made on the first, failed query\r\n- Based on stepping through what happens in the debugger and reading some bits of the tRPC source, I think it's related to how tRPC's React Query wrapper deals with React 18's behavior of mounting components twice. An AbortSignal is used to cancel the promise of the query when the component unmounts, and I think the loggerLink is catching this.\r\n- I think this issue might fix it https://github.com/trpc/trpc/issues/2612\r\n- It doesn't happen with tRPC v10 (or at least not in `create-t3-app@next`). Not sure why as from my (very limited) understanding of the code, the useQuery and loggerLink behaviors are implemented basically the same.\r\n\r\nScreenshots below of v9 (top) and v10 (bottom).\r\n\r\n\r\n\r\n\r\n\r\nHere's the stack trace of the failed query:\r\n```\r\nTRPCClientError: The operation was aborted.\r\n at Function.from (webpack-internal:///./node_modules/@trpc/client/dist/TRPCClientError-09b8a26b.esm.js:78:14)\r\n at eval (webpack-internal:///./node_modules/@trpc/client/links/httpBatchLink/dist/trpc-client-links-httpBatchLink.esm.js:209:87)\r\n at Object.onDone (webpack-internal:///./node_modules/@trpc/client/dist/trpc-client.esm.js:196:13)\r\n at Object.done (webpack-internal:///./node_modules/@trpc/client/dist/trpc-client.esm.js:110:219)\r\n at promise.cancel (webpack-internal:///./node_modules/@trpc/client/dist/trpc-client.esm.js:325:17)\r\n at cancelFn (webpack-internal:///./node_modules/react-query/es/core/retryer.js:118:28)\r\n at Retryer.cancel (webpack-internal:///./node_modules/react-query/es/core/retryer.js:41:40)\r\n at Query.removeObserver (webpack-internal:///./node_modules/react-query/es/core/query.js:209:26)\r\n at QueryObserver.destroy (webpack-internal:///./node_modules/react-query/es/core/queryObserver.js:76:23)\r\n at QueryObserver.onUnsubscribe (webpack-internal:///./node_modules/react-query/es/core/queryObserver.js:61:12)\r\n at eval (webpack-internal:///./node_modules/react-query/es/core/subscribable.js:26:13)\r\n at eval (webpack-internal:///./node_modules/react-query/es/react/useBaseQuery.js:82:7)\r\n at safelyCallDestroy (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22927:5)\r\n at commitHookEffectListUnmount (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23095:11)\r\n at invokePassiveEffectUnmountInDEV (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25202:13)\r\n at invokeEffectsInDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27346:11)\r\n at commitDoubleInvokeEffectsInDEV (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27319:7)\r\n at flushPassiveEffectsImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27051:5)\r\n at flushPassiveEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26979:14)\r\n at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26764:9)\r\n at workLoop (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:266:34)\r\n at flushWork (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:239:14)\r\n at MessagePort.performWorkUntilDeadline (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:533:21)\r\n ```\r\n\r\n(i'd be up to work on this, but it can probably get fixed much faster by someone more familiar with tRPC/RQ codebases as I haven't read either before yesterday)\r\n\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[],2627,"bug: loggerLink shows failed query on page load","2022-10-04T00:17:46Z","https://github.com/trpc/trpc/issues/2627",0.78614724,{"description":3122,"labels":3123,"number":3132,"owner":3022,"repository":3022,"state":3050,"title":3133,"updated_at":3134,"url":3135,"score":3136},"# Kitchen Sink\r\n\r\n- **Live Site:** https://kitchen-sink.trpc.io/\r\n- **Source:** https://github.com/trpc/examples-kitchen-sink\r\n\r\nThe goal of the Kitchen Sink is to provide a good collection of useful design patterns when working with tRPC. It should be easy to navigate [kitchen-sink.trpc.io](https://kitchen-sink.trpc.io) and have it as a reference site โ the northern star would be the [Tailwind Docs](https://tailwindcss.com/docs).\r\n\r\nI will probably replace the main website with this site & I want to experiment with monetization. Maybe this could be the \"tailwindui\" of trpc. \r\n\r\n\r\n## Wishlist\r\n\r\n### Overall site improvements\r\n\r\n- [ ] Nicer home page\r\n- [x] Nicer code example pages\r\n- [ ] Interactive code examples with [Monaco](https://github.com/suren-atoyan/monaco-react) or similar\r\n- [x] Implement code syntax highlighter for source code\r\n- [x] Copy to clipboard \r\n- [x] Nicer view, sort of (preview/code tab bar?) \r\n- [ ] Link / embed / generate codesandbox on each example? \r\n- [ ] Maybe some nicer way of handling features? Some code generation to make it easier to work on one feature in isolation?\r\n- [ ] Login with GitHub\r\n\r\n### Features\r\n\r\n- [x] `getStaticProps` [๐ Implemented](https://kitchen-sink.trpc.io/ssg)\r\n - [x] Basic examples\r\n - [ ] Improve with splitting up into a \"list\" page and a `[id].tsx` page\r\n- [ ] getServerSideProps \r\n- [ ] Infinite queries\r\n- [ ] Paginated pages \r\n- [ ] Optimistic prefetching\r\n- [ ] Good patterns with Suspense\r\n- [ ] Error handling\r\n- [x] Integration with react-hook-form -[ ๐ Implemented](https://kitchen-sink.trpc.io/react-hook-form)\r\n - [x] Reusing validation schema server/client\r\n - [x] Invalidate queries\r\n- [ ] API response caching\r\n- [ ] `QueryCell` pattern - (#1734)\r\n- [ ] Integration testing\r\n- [x] User auth\r\n- **... + ๐ ideas welcome!**\r\n\r\n\r\n### Stretch goals\r\n\r\n- Make this into the actual trpc.io main site?\r\n- Potentially I'll limit view of examples to contributors & sponsors - maybe it's possible to make money off OSS?\r\n\r\n## How to contribute \r\n\r\n### Clone and start the Kitchen sink:\r\n\r\n```bash\r\ngit clone git@github.com:trpc/trpc.git\r\ncd trpc/examples/kitchen-sink\r\nyarn && yarn dx\r\n```\r\n\r\n### Adding an example\r\n\r\n1. Create a new folder in `src/feature/X` by duplicating some of the existing ones\r\n1. Update `meta.tsx`\r\n1. Create a new page in `src/pages/X` and import the file\r\n1. Import the router from your example in `src/server/routers/_app.ts`\r\n\r\n\n\n\u003Csub>[TRP-62](https://linear.app/trpc/issue/TRP-62/kitchen-sink-wishlist)\u003C/sub>",[3124,3125,3128,3129],{"name":3032,"color":3033},{"name":3126,"color":3127},"๐โโ๏ธ help wanted","008672",{"name":3044,"color":3045},{"name":3130,"color":3131},"๐ธ Get paid!","c2e0c6",1254,"[TRP-62] Kitchen Sink Wishlist","2023-05-25T20:50:12Z","https://github.com/trpc/trpc/issues/1254",0.7871333,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3UJ5aSJmiBDTi9FBNiHAigk3lmVYk-Q53qmpuT73ujI":-1},"/trpc/trpc-openapi/157"]