;\r\n})\r\n\r\nexport default trpc.withTRPC(MyApp);\r\n```\r\n\r\n#### After\r\n\r\n> Not thrilled about exactly this API-design, but gets the point across that `withTRPC()` can be tree shaken, feel free to do other suggestions\r\n\r\n```ts\r\n// _app.tsx\r\nimport { AppType } from 'next/dist/shared/lib/utils';\r\nimport { trpc } from '~/utils/trpc';\r\nimport { createTRPCNextWithTRPC } from '@trpc/next';\r\n\r\nconst MyApp: AppType = (({ Component, pageProps }) => {\r\n return \u003CComponent {...pageProps} />;\r\n})\r\n\r\nexport default createWithTRPC(trpc)(MyApp);\r\n```\r\n",[2896],{"name":2897,"color":2898},"RFC","78B062",2650,"Break out `withTRPC` from `createTRPCNext`?","2022-11-04T00:06:57Z","https://github.com/trpc/trpc/issues/2650",0.70523846,{"description":2905,"labels":2906,"number":2913,"owner":2869,"repository":2914,"state":2888,"title":2915,"updated_at":2916,"url":2917,"score":2918},"Hi,\r\n\r\nI am currently trying to use trpc open api on nextjs new app directory structure. (nextjs 13)\r\n\r\nThe issue is that request and response of the new [route handlers](https://beta.nextjs.org/docs/routing/route-handlers) are incompatible with with the core http/node you have.\r\n\r\nHere is the type of the request: https://beta.nextjs.org/docs/api-reference/request and the response: https://beta.nextjs.org/docs/api-reference/response\r\n\r\nHave you planned to handle this case too ?\r\n\r\nThanks a lot !",[2907,2910],{"name":2908,"color":2909},"enhancement","a2eeef",{"name":2911,"color":2912},"help wanted","008672",289,"trpc-openapi","Handle nextjs 13 App directory ","2023-10-29T18:06:39Z","https://github.com/trpc/trpc-openapi/issues/289",0.70837414,{"description":2920,"labels":2921,"number":2925,"owner":2869,"repository":2869,"state":2888,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Provide environment information\r\n\r\n```\r\n System:\r\n OS: macOS 12.0.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 131.88 MB / 16.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm\r\n Watchman: 2021.06.07.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 106.0.5249.119\r\n Edge: 106.0.1370.47\r\n Firefox: 92.0\r\n Safari: 15.1\r\n npmPackages:\r\n @tanstack/react-query: ^4.10.1 => 4.10.1 \r\n @trpc/client: ^10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15 \r\n @trpc/react: ^10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15 \r\n @trpc/server: ^10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15 \r\n react: ^18.2.0 => 18.2.0 \r\n typescript: ^4.6.4 => 4.8.3\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen multiple tRPC Providers are nested, all calls to **any** tRPC client will use the closest parent Provider.\r\n\r\nSimplified example:\r\n\r\n```tsx\r\nconst outerTrpc = createTRPCReact\u003COuterRouter>();\r\nconst innerTrpc = createTRPCReact\u003CInnerRouter>();\r\n\r\nconst Root = () => (\r\n \u003CouterTrpc.Provider (...)>\r\n \u003CinnerTrpc.Provider (...)>\r\n \u003CApp />\r\n \u003C/innerTrpc.Provider>\r\n \u003C/outerTrpc.Provider>\r\n);\r\n\r\n// (...clients and query clients)\r\n\r\nconst App = () => {\r\n // These will both query the innerTrpc client\r\n const outerQuery = outerTrpc.someQuery.useQuery();\r\n const innerQuery = innerTrpc.someOtherQuery.useQuery();\r\n\r\n return null;\r\n}\r\n```\r\n\r\n# Expected result\r\n\r\nWhen calling `outerTrpc.someQuery.useQuery()`, it should query `outerTrpcClient`, even if another tRPC client Provider is a closer parent.\r\n\r\n_(screenshots are from the repro repo)_\r\n\r\n\u003Cimg width=\"140\" alt=\"image\" src=\"https://user-images.githubusercontent.com/17611888/196232976-1894dfbd-9b25-4478-bfbf-4a2880e7daae.png\">\r\n\r\n\r\n\r\n# Actual result\r\n\r\nBoth requests are sent to the `/inner` client.\r\n\r\n\u003Cimg width=\"398\" alt=\"image\" src=\"https://user-images.githubusercontent.com/17611888/196232568-c2f5a70a-b91a-495c-a2c1-366e2cc3c72b.png\">\r\n\r\n\r\n\r\n# Use case\r\n\r\nI am embedding a `react-native` app in a web-app using `react-native-web`. The app and the web client have separate tRPC routers. \r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/lukasgjetting/nested-trpc-providers-bug\r\n\r\n### To reproduce\r\n\r\nStackBlitz did not seem able to handle `@trpc/server` (or more likely, I misconfigured something?).\r\n\r\nOn `main`, the bug exists. On the branch `fixed-unique-context` I have implemented a fix using `patch-package`. The fix is to create a unique context for every call to `createTRPCReact`.\r\n\r\nIf this is the correct way to fix the bug, and you agree it should be fixed, I would be happy to provide a PR.\r\n\r\n**NOTE: When switching between branches, make sure to run `yarn install`. Also, when switching to `main` delete `node_modules` (since the patch won't automatically be undone)**\r\n\r\n---\r\n\r\nFor the record, here is the error thrown by StackBlitz after adding the dependencies: \r\n\r\n```\r\n[{\"line\":0,\"character\":0,\"message\":\"The entrypoint for '' could not successfully be resolved. The file '/turbo_modules/@trpc/server@10.0.0-proxy-beta.21/dist/observable/index.mjs' does not exist. Please log an issue with the package author or check for an updated version of the package.\",\"filePath\":\"\",\"type\":\"TRANSLATE\"}]\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!",[2922],{"name":2923,"color":2924},"duplicate","cfd3d7",3026,"bug: Nesting tRPC providers results in calls to the incorrect server","2022-10-17T17:10:06Z","https://github.com/trpc/trpc/issues/3026",0.71326065,{"description":2931,"labels":2932,"number":2936,"owner":2869,"repository":2869,"state":2888,"title":2937,"updated_at":2938,"url":2939,"score":2940},"`@trpc/next`: 7.2.1\r\n\r\nWrapping `_app` in `withTRPC` removes `pageProps`\r\n\r\nExample: `pageProps` is undefined:\r\n```ts\r\nimport {withTRPC} from \"@trpc/next\"\r\nimport {Provider} from \"next-auth/client\"\r\nimport {AppProps} from \"next/app\"\r\nimport \"../style/app.css\"\r\n\r\nfunction App({Component, pageProps}: AppProps) {\r\n console.log({pageProps}) // {pageProps: undefined}\r\n return (\r\n \u003CProvider session={pageProps.session}>\r\n \u003CComponent {...pageProps} />\r\n \u003C/Provider>\r\n )\r\n}\r\n\r\nexport default withTRPC(\r\n (_ctx) => ({\r\n url: \"http://localhost:3000/api/trpc\",\r\n queryClientConfig: {\r\n defaultOptions: {\r\n queries: {\r\n staleTime: 600\r\n }\r\n }\r\n }\r\n }),\r\n {ssr: true}\r\n)(App)\r\n```\r\n\r\nExample: `pageProps` is not undefined:\r\n```ts\r\nimport {Provider} from \"next-auth/client\"\r\nimport {AppProps} from \"next/app\"\r\nimport \"../style/app.css\"\r\n\r\nexport default function App({Component, pageProps}: AppProps) {\r\n return (\r\n \u003CProvider session={pageProps.session}>\r\n \u003CComponent {...pageProps} />\r\n \u003C/Provider>\r\n )\r\n}\r\n```",[2933],{"name":2934,"color":2935},"🔎 needs more investigation/info","d4c5f9",574,"@trpc/next withTRPC \"eats\" pageProps ","2022-10-05T00:09:46Z","https://github.com/trpc/trpc/issues/574",0.7295432,{"description":2942,"labels":2943,"number":2945,"owner":2869,"repository":2869,"state":2888,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Area of Improvement\n\nIt was extremenly frustrauting to me to not get or see setup guide in docs for Next.js (14) App Router. The current Next.js setup guide is only using Pages Router.\r\n\r\nPlease fix this as it is a very bad look for tRPC. \n\n### Link to related docs\n\nhttps://trpc.io/docs/client/nextjs/setup\n\n### Additional information\n\n_No response_\n\n### 👨👧👦 Contributing\n\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing the suggested changes!",[2944],{"name":2866,"color":2867},5936,"docs: No Setup Guide For Next.js App Router","2025-03-20T15:42:31Z","https://github.com/trpc/trpc/issues/5936",0.7318763,{"description":2951,"labels":2952,"number":2953,"owner":2869,"repository":2869,"state":2888,"title":2954,"updated_at":2955,"url":2956,"score":2957},"Hi guys! Soon to be fan here. 🙌\n\nI'd like to check with you guys if you already have a working example of two apps (client and server) coexisting and successfully sharing the AppRouter type using NX.\n\nIn my case, I have a RN app importing the RootRouter (AppRouter alias) from an Express app. Both living in the apps folder. But as you can see in the images bellow, the server defines and exports the type as it should, but right on the import, the client does not seem to be able to properly infer the type.\n\n\n\n\n\nAnyone has any idea of what might be happening? Maybe a configuration is missing?\n\nThanks in advance.",[],2253,"NX + TRPC + Client","2022-07-19T09:15:37Z","https://github.com/trpc/trpc/issues/2253",0.733014,{"description":2959,"labels":2960,"number":2961,"owner":2869,"repository":2869,"state":2888,"title":2962,"updated_at":2963,"url":2964,"score":2965},"(This is a follow-up to [this Discord thread](https://discord.com/channels/867764511159091230/894984069291581511/997850601100677150))\r\n\r\nI was checking out the v10 docs (https://alpha.trpc.io) and noticed a bunch of things I was massively turned off by and I'm pretty confident I'm not alone in this, I figured maybe I should provide this feedback to you guys before v10 gets released so that hopefully things improve.\r\nThe major issue for me is the new client API:\r\n\r\n## Client API:\r\n### The setup:\r\nThe new client API basically has a two-step setup:\r\n```ts\r\nimport { createTRPCClient, createTRPCClientProxy } from '@trpc/client';\r\n\r\nconst client = createTRPCClient\u003CAppRouter>({\r\n url: 'http://localhost:5000/trpc'\r\n});\r\n\r\nconst proxy = createTRPCClientProxy(client);\r\n```\r\nI'm not quite sure about the rationale behind this design but I'm pretty sure it would feel confusing, redundant, and verbose to most users. I especially dislike the fact that the variable (or constant, to be more accurate) that you will have to use over and over again to execute your procedures is called `proxy`, that's pretty vague and the word `client` would've been far better, but sadly it's taken in this context due to the two-step nature of this setup. The current workaround for this would be something like:\r\n```ts\r\nimport { createTRPCClient, createTRPCClientProxy } from '@trpc/client';\r\n\r\nconst client = createTRPCClientProxy(\r\n createTRPCClient\u003CAppRouter>({\r\n url: 'http://localhost:5000/trpc'\r\n })\r\n);\r\n```\r\nWhich is obviously verbose and ugly, so why not just:\r\n```ts\r\nimport { createClient } from '@trpc/client';\r\n\r\nconst client = createClient({\r\n url: 'http://localhost:5000/trpc'\r\n});\r\n```\r\nNotice the `createClient` function name as well. This provides two advantages:\r\n- It's shorter and more easily readable than `createTRPCClient`, I think putting the word `TRPC` in that function name is fundamentally redundant since the function is being imported from `@trpc/client` anyway. If someone has the same function name in the same scope they could simply do `import * as trpc from '@trpc/client` and then `trpc.createClient(...)`, which looks much better in my opinion. Although I understand this point could be somewhat subjective.\r\n- The more objective reason, so to speak, is that this allows you to keep the old `createTRPCClient` function for backward-compatibility, which seems to me to be the reason behind this new `createTRCPClientProxy` thing in the first place. Correct me if I'm wrong.\r\n\r\n### The usage:\r\nApparently the way you're supposed to call the procedures is like this:\r\n```ts\r\nconst bilbo = await proxy.getUser.query('id_bilbo');\r\nconst frodo = await proxy.createUser.mutation({ name: 'Frodo' });\r\n```\r\nThis one was legit painful for me to look at. At first glance, this syntax doesn't make any sense. Why not just:\r\n```ts\r\nconst bilbo = await proxy.getUser('id_bilbo');\r\nconst frodo = await proxy.createUser({ name: 'Frodo' });\r\n```\r\nIt's clear that `getUser` is a query and `createUser` is a mutation, so why the unnecessary verbosity?!\r\nTurns out the purpose of this peculiar syntax is to account for [a very specific type of scenario](https://discord.com/channels/867764511159091230/997850601100677150/997855779187077203) in which a query has an input that's too large to fit inside the character limit of URLs in a GET request, so it's instead sent as a mutation (i.e. as a POST request) so that input gets sent put in the body of that request.\r\n\r\nThis feels to me like a cheap hack to solve a specific problem for which tRPC should instead provide an explicit solution/configuration option, instead of doing something like this which apart from being extremely non-obvious, downright violates the semantics of queries and mutations, and makes the syntax nonsensical and needlessly verbose.\r\n\r\nI think it makes more sense for tRPC to provide an explicit configuration option to address this particular problem (e.g. `usePost: true`), take a look at [this](https://discord.com/channels/867764511159091230/997850601100677150/997858329567182988) and the other comments for some ideas.\r\n\r\nLet me know your thoughts.\r\nThank you.",[],2217,"v10 client API design","2022-07-20T11:19:13Z","https://github.com/trpc/trpc/issues/2217",0.7353093,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fK-6fDjTf0eWjaHSgGvkKR6lWtiRBksRfpgzDPKaFliw":-1},"/trpc/next-13/37"]