\r\n \u003CStack.Screen name=\"Results\" component={ResultsComponent}/>\r\n \u003C/Stack.Navigator>\r\n \u003C/NavigationContainer>\r\n \u003C/ThemeProvider>\r\n \u003C/TRPCProvider>\r\n \u003C/AuthenticationProvider>\r\n );\r\n}\r\n```\r\nmy component\r\n\r\n```\r\nimport { trpc } from \"../../utils/trpc-client\";\r\n\r\nexport function ResultsComponent({navigation, route}) {\r\n\r\n const {data} = trpc.moviesRecommendation.useQuery(\r\n {\r\n runtimeMinsMin: 100\r\n }\r\n )\r\n```\r\ntrpc-client.ts\r\n\r\n```\r\nimport { AppRouter } from \"../server/trpc\";\r\nimport { createTRPCReact, httpLink } from \"@trpc/react-query\";\r\n\r\nexport const trpc = createTRPCReact\u003CAppRouter>()\r\n\r\nexport const trpcClient = trpc.createClient({\r\n links: [httpLink({url: 'http://localhost:3000/api/trpc'})],\r\n})\r\n```\r\nand trpc-provider.ts\r\n\r\n```\r\nexport function TRPCProvider({children}: PropsWithChildren) {\r\n const [queryClient] = useState(() => new QueryClient())\r\n\r\n return (\r\n \u003Ctrpc.Provider client={trpcClient} queryClient={queryClient}>\r\n \u003CQueryClientProvider client={queryClient} contextSharing={true}>\r\n {children}\r\n \u003C/QueryClientProvider>\r\n \u003C/trpc.Provider>\r\n )\r\n}\r\n```\r\nSo is the web error while using useQuery:\r\n```\r\n\r\nUncaught Error: No QueryClient set, use QueryClientProvider to set one\r\n at Object.useQueryClient (QueryClientProvider.tsx:48:1)\r\n at Object.useBaseQuery (useBaseQuery.ts:33:1)\r\n at useQuery (useQuery.ts:139:1)\r\n at Object.useQuery$1 [as useQuery] (createHooksInternal-808efaa7.mjs:277:1)\r\n at createHooksInternal-808efaa7.mjs:52:1\r\n at Object.apply (index-972002da.mjs:18:1)\r\n at ResultsComponent (results-component.tsx:11:1)\r\n at renderWithHooks (react-dom.development.js:16175:1)\r\n at mountIndeterminateComponent (react-dom.development.js:20913:1)\r\n at beginWork (react-dom.development.js:22416:1)\r\n```\r\n\r\n\r\n\r\n",[3041],{"name":3042,"color":3043},"👻 invalid","e4e669",3316,"bug: Expo + trpc: Uncaught Error: No QueryClient set, use QueryClientProvider to set one","2022-12-20T12:02:19Z","https://github.com/trpc/trpc/issues/3316",0.6297937,{"description":3050,"labels":3051,"number":3052,"owner":3022,"repository":3022,"state":3033,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Provide environment information\r\n\r\n```\r\n\r\n System:\r\n OS: macOS 12.5.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 157.83 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 8.19.1 - ~/.nvm/versions/node/v16.17.0/bin/npm\r\n Watchman: 2022.09.12.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Brave Browser: 106.1.44.105\r\n Chrome: 105.0.5195.125\r\n Firefox: 105.0.1\r\n Safari: 16.0\r\n npmPackages:\r\n @trpc/react: ^10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15\r\n react: 18.0.0 => 18.0.0 \r\n typescript: ~4.7.4 => 4.7.4 \r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\nIf I create a trpc react proxy and client like:\r\n\r\n```typescript\r\nexport const trpc = createTRPCReact\u003CUserRouter>()\r\nexport const trpcClient: TRPCClient\u003CUserRouter> = trpc.createClient({\r\n links: [\r\n httpBatchLink({\r\n url: \"http://localhost:3000/user\"\r\n }),\r\n ],\r\n})\r\n```\r\n\r\nAnd try to use the `trpcClient` directly, it does not have the correct types:\r\n\r\n```typescript\r\n const createAccountResult = await trpcClient.mutation(\"account.create\")\r\n```\r\n\r\nWill return: `TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.`\r\n\r\n### Link to reproduction\r\n\r\nhttps://stackblitz.com/github/trpc/examples-next-minimal-starter\r\n\r\n### To reproduce\r\n\r\nSee above\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,"bug: `TRPCClient` from `createTRPCReact\u003CRouterType>().createClient` is incorrectly typed","2022-10-05T23:29:07Z","https://github.com/trpc/trpc/issues/2922",0.64583063,{"description":3058,"labels":3059,"number":3060,"owner":3022,"repository":3022,"state":3033,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Provide environment information\n\nSystem:\r\n OS: macOS 12.4\r\n CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz\r\n Memory: 36.45 MB / 8.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.10.0 - ~/Desktop/predictionBook/backend/node_modules/.bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 8.19.2 - /usr/local/bin/npm\r\n Watchman: 2022.10.31.00 - /usr/local/bin/watchman\r\n Browsers:\r\n Chrome: 108.0.5359.124\r\n Firefox: 108.0.1\r\n Safari: 15.5\n\n### Describe the bug\n\n\r\nClient package\r\n```\r\n\"@craco/craco\": \"^6.4.5\",\r\n \r\n \"@trpc/client\": \"^9.27.4\",\r\n \"@trpc/server\": \"^9.27.4\",\r\n \"@types/jest\": \"^27.0.1\",\r\n \"@types/node\": \"^16.7.13\",\r\n \"typescript\": \"^4.4.2\",\r\n \"zod\": \"^3.19.1\"\r\n```\r\n\r\nBackend package \r\n```\r\n \"@trpc/client\": \"^9.27.4\",\r\n \"@trpc/server\": \"^9.27.4\",\r\n \"dotenv\": \"^16.0.3\",\r\n \"express\": \"^4.18.2\",\r\n \"node\": \"^18.10.0\",\r\n \"nodemon\": \"^2.0.20\",\r\n \"jest\": \"^29.3.1\",\r\n \"zod\": \"^3.19.1\"\r\n```\r\n\r\nThe issue is that in my apiTests.test.ts file (using Jest), my client.mutation call is not working as intended. \r\nFor some reason its not adopting the types from the router, despite context being provided. In the example below, it says that \"Argument of type '{ email?: string; password?: string; }' is not assignable to parameter of type 'undefined'\"\r\nThe part that's tripping me is that this works just fine in my front-end code, where this exact same call is made and works.\r\n\r\nconst launchClient = createTRPCClient\u003CLaunchRouter>({\r\n url: `http://localhost:${PORT}/v1/launch`,\r\n});\r\n\r\ntest(\"Login and Signup\", async()=> {\r\n\r\n const email = randEmail()\r\n const password = randPassword() + '@'\r\n const name = randUserName()\r\n\r\n\r\n const apiReq:api.LoginRequest = {email, password}\r\n await expect(await launchClient.mutation('login',apiReq)).rejects.toThrow(\"FORBIDDEN\")\r\n \r\n})\n\n### Link to reproduction\n\nhttps://stackblitz.com/github/trpc/examples-next-minimal-starter?file=README.md\n\n### To reproduce\n\nI could not reproduce the bug\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!",[],3444,"bug: args_0 undefined","2022-12-20T23:50:41Z","https://github.com/trpc/trpc/issues/3444",0.6490056,{"description":3066,"labels":3067,"number":3079,"owner":3022,"repository":3022,"state":3033,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Provide environment information\n\nWorks on \r\n```\r\n \"@trpc/client\": \"11.0.0-rc.660\",\r\n \"@trpc/react-query\": \"11.0.0-rc.660\",\r\n \"@trpc/server\": \"11.0.0-rc.660\",\r\n```\r\n\r\nFails on\r\n```\r\n \"@trpc/client\": \"11.0.0-rc.688\",\r\n \"@trpc/react-query\": \"11.0.0-rc.688\",\r\n \"@trpc/server\": \"11.0.0-rc.688\",\r\n```\n\n### Describe the bug\n\nAfter updating trpc packages to v11.0.0-rc.688 trpc.Provider throws an uncaught exception\r\n\r\n```\r\nCannot read properties of undefined (reading '__untypedClient')\r\n\r\nThe above error occurred in the \u003CTRPCProvider> component:\r\n\r\n at TRPCProvider (https://localhost:2013/coupons.dev.js:29544:17)\r\n at QueryProvider (https://localhost:2013/coupons.dev.js:10038:33)\r\n```\n\n### Link to reproduction\n\nhttps://discord.com/channels/867764511159091230/1326639424708022363/1326639424708022363\n\n### To reproduce\n\nI would not know where to start to get even something remotely close to our setup in StackBlitz or similar... but i will share some code snippets i think are relevant maybe it is something very obvious:\r\n\r\nWe have a file named trpc.ts that contains the following:\r\n\r\n```ts\r\nimport type { AppRouter } from '@our-api';\r\nimport { createTRPCReact } from '@trpc/react-query';\r\nimport type { inferRouterOutputs } from '@trpc/server';\r\n\r\nexport type RouterOutputs = inferRouterOutputs\u003CAppRouter>;\r\n\r\nexport const trpc = createTRPCReact\u003CAppRouter>();\r\n```\r\n\r\nthen we have a QueryProvider.tsx file that contains\r\n```tsx\r\nimport type { ReactNode } from 'react';\r\nimport React, { useState } from 'react';\r\n\r\nimport { createQueryClient, useTRPCClientLinks } from '@/utils';\r\nimport { QueryClientProvider } from '@tanstack/react-query';\r\n\r\nimport { trpc } from './trpc';\r\n\r\nconst queryClient = createQueryClient();\r\n\r\ntype CouponsQueryProviderProps = {\r\n children: ReactNode;\r\n};\r\n\r\nexport const CouponsQueryProvider = ({ children }: CouponsQueryProviderProps) => {\r\n const links = useTRPCClientLinks(process.env.COUPONS_API_URL ?? '');\r\n const [trpcClient] = useState(trpc.createClient({ links }));\r\n\r\n return (\r\n \u003Ctrpc.Provider client={trpcClient} queryClient={queryClient}>\r\n \u003CQueryClientProvider client={queryClient}>{children}\u003C/QueryClientProvider>\r\n \u003C/trpc.Provider>\r\n );\r\n};\r\n```\r\n\r\nthe @/utils function createQueryClient is defined as:\r\n\r\n```ts\r\nimport { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';\r\nimport { TRPCClientError } from '@trpc/client';\r\n\r\nimport { CredentialsHandler } from '../credentials';\r\n\r\nexport const createQueryClient = () => {\r\n const unauthorizedHandlerOptions = {\r\n onError: (error: unknown) => {\r\n if (error instanceof TRPCClientError && error.data?.code === 'UNAUTHORIZED') {\r\n const credentialsHandler = CredentialsHandler.getInstance();\r\n\r\n credentialsHandler.clearCredentials();\r\n\r\n window.location.pathname = '/login';\r\n }\r\n },\r\n };\r\n\r\n return new QueryClient({\r\n queryCache: new QueryCache(unauthorizedHandlerOptions),\r\n mutationCache: new MutationCache(unauthorizedHandlerOptions),\r\n defaultOptions: {\r\n queries: {\r\n refetchOnWindowFocus: false,\r\n staleTime: 30 * 1000,\r\n retry(failureCount, error) {\r\n if (error instanceof TRPCClientError) {\r\n const { data } = error;\r\n if (data?.httpStatus >= 400 && data?.httpStatus \u003C 500) {\r\n return false;\r\n }\r\n }\r\n\r\n return failureCount \u003C 3;\r\n },\r\n },\r\n },\r\n });\r\n};\r\n```\r\nand the useTRPCClientLinks file imported in the QueryProvider.tsx file is like this:\r\n\r\n```ts\r\nimport { useState } from 'react';\r\n\r\nimport { getFetch, httpLink, splitLink, unstable_httpSubscriptionLink } from '@trpc/client';\r\n\r\nimport { CredentialsHandler } from '../credentials';\r\n\r\nimport { usePosthog } from './usePosthog';\r\n\r\nexport const useTRPCClientLinks = (url: string) => {\r\n const posthog = usePosthog();\r\n\r\n const [links] = useState(() => {\r\n const http = httpLink({\r\n url,\r\n fetch: async (input, init) => {\r\n const fetch = getFetch();\r\n return fetch(input, { ...init, credentials: 'include' });\r\n },\r\n headers: () => {\r\n const originURL = window.location.href;\r\n const credentialsHandler = CredentialsHandler.getInstance();\r\n let parsedReleaseState: string = 'unknown';\r\n try {\r\n const parsed = JSON.parse(window?.localStorage.getItem('releaseState') || '{}');\r\n parsedReleaseState = parsed?.fetchedRelease;\r\n } catch {\r\n parsedReleaseState = 'unknown';\r\n }\r\n\r\n return {\r\n 'origin-url': originURL,\r\n ...(credentialsHandler.getStoredCredentials() ?? {}),\r\n 'posthog-session-recording-url': posthog.get_session_replay_url({ withTimestamp: true }),\r\n 'frontend-version': parsedReleaseState,\r\n };\r\n },\r\n });\r\n\r\n return [\r\n splitLink({\r\n condition: (op) => op.type === 'subscription',\r\n true: unstable_httpSubscriptionLink({\r\n url,\r\n }),\r\n false: http,\r\n }),\r\n ];\r\n });\r\n\r\n return links;\r\n};\r\n\r\n```\r\n\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!",[3068,3071,3072,3075,3078],{"name":3069,"color":3070},"🙋♂️ help wanted","008672",{"name":3042,"color":3043},{"name":3073,"color":3074},"🔎 needs more investigation/info","d4c5f9",{"name":3076,"color":3077},"⏮ needs reproduction","000055",{"name":3019,"color":3020},6374,"Cannot read properties of undefined (reading '__untypedClient') on trpc.Provider","2025-01-19T00:08:09Z","https://github.com/trpc/trpc/issues/6374",0.66271824,{"description":3085,"labels":3086,"number":3087,"owner":3022,"repository":3022,"state":3033,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Provide environment information\r\n\r\n``` \r\nSystem:\r\n OS: macOS 12.2.1\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 131.52 MB / 32.00 GB\r\n Shell: 3.2.57 - /bin/bash\r\n Binaries:\r\n Node: 18.8.0 - ~/.local/share/nvm/v18.8.0/bin/node\r\n Yarn: 1.22.19 - ~/.local/share/nvm/v18.8.0/bin/yarn\r\n npm: 8.18.0 - ~/.local/share/nvm/v18.8.0/bin/npm\r\n Browsers:\r\n Chrome: 106.0.5249.103\r\n Firefox: 105.0.2\r\n Safari: 15.3\r\n npmPackages:\r\n @trpc/client: ^10.0.0-proxy-beta.17 => 10.0.0-proxy-beta.17\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nTypescript can't complete the typing of a query, see discussion https://github.com/trpc/trpc/discussions/2963\r\n\r\n\r\n`Property 'subscribe' does not exist on type 'DecoratedProcedureRecord\u003Cunknown, BuildProcedure\u003C\"subscription\", { _config: RootConfig\u003C{ ctx: {}; meta: {}; errorShape: never; transformer: CombinedDataTransformer; }>; _ctx_out: {}; _input_in: unique symbol; _input_out: unique symbol; _output_in: u\r\n nique symbol; _output_out: unique symbol; _meta: {}; }, Observable\u003C....'.`\r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/Lilja/trpc-v10-server-needed\r\n\r\n### To reproduce\r\n\r\nOpen up `src/index.ts` and modify the `type {AppRouter}` import, point it to the trpc repo OR a another router.\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 fixing this bug!",[],2972,"bug: @trpc/server needed in the frontend for types to work","2022-10-11T08:18:00Z","https://github.com/trpc/trpc/issues/2972",0.66324043,{"description":3093,"labels":3094,"number":3095,"owner":3022,"repository":3022,"state":3033,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### Provide environment information\n\nMy code\n\n```ts\n// frontend/trpc/client.vanilla.ts\n\nimport { createTRPCClient, httpBatchLink } from '@trpc/client';\n\nimport { VITE_API_SERVER_URL } from '@/constants';\nimport type { RootRouter } from '../..backend-express/trpc.root-router.types';\n\n// trpc client vanilla \nexport const trpcClientVanilla = createTRPCClient\u003CRootRouter>({\n links: [\n httpBatchLink({\n url: `${VITE_API_SERVER_URL}/trpc`,\n })\n ],\n});\n\n```\n\n```ts\n// frontend/trpc/client.react-query.ts\n\nimport { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';\n\nimport { queryClient } from '@/lib/tanstack/tanstack-query-provider';\nimport { trpcClientVanilla } from './trpc.client.vanilla';\nimport type { RootRouter } from '../..backend-express/trpc.root-router.types';\n\n// trpc client react query\nconst trpcReactQuery = createTRPCOptionsProxy\u003CRootRouter>({\n client: trpcClientVanilla,\n queryClient,\n});\nexport const trpc = trpcReactQuery;\n\n```\n\n\n..then in react components\n\n```tsx\n\n// frontend/react-comp.tsx\n\nimport {trpc} from 'frontend/trpc/client.react-query'\n\nfunction RouteComponent() {\n\n const utils = trpc.useUtils(); // ❌ not exists\n\n const dataQuery = useQuery(trpc.test.queryData.queryOptions());\n const mutationData = useMutation(trpc.test.mutateData.mutationOptions());\n\n return (\n \u003Cdiv className='p-8 space-y-6'>\n \u003Ch1>Hello \"/test-trpc\"!\u003C/h1>\n {dataQuery.isPending ? (\n \u003Cdiv>Loading dataQuery...\u003C/div>\n ) : dataQuery.isError ? (\n \u003Cdiv>Error in dataQuery: {dataQuery.error.message}\u003C/div>\n ) : (\n \u003Cdiv className='space-y-6'>\n \u003Cdiv className='space-y-3'>\n \u003Ch2>dataQuery\u003C/h2>\n \u003CDebugJson json={{ ...dataQuery.data }} />\n \u003C/div>\n \u003Cdiv className='space-y-3'>\n \u003Ch2>mutationData\u003C/h2>\n \u003CButton\n onClick={() => {\n mutationData.mutate({\n text: 'mutated',\n array: [999],\n object: {\n name: 'John Elkan',\n age: 12,\n }\n });\n }}\n >Mutate\u003C/Button>\n \u003C/div>\n \u003C/div>\n )}\n \u003C/div>\n );\n}\n```\n\n\n## Versions\n\n- backend\n \"@trpc/client\": \"^11.1.1\",\n \"@trpc/server\": \"^11.1.1\",\n- frontend\n \"@trpc/client\": \"^11.1.1\",\n \"@trpc/server\": \"^11.1.1\",\n \"@trpc/tanstack-react-query\": \"^11.1.1\",\n \"@tanstack/react-query\": \"^5.74.7\",\n\n## Questions\n\n1. `useUtils` is a v10 thing (removed in v11) ? I see nothing in [migration v10 to v11](https://trpc.io/docs/migrate-from-v10-to-v11)\n2. (Potential Off-topic) Should i use `@trpc/tanstack-react-query` or `@trpc/react-query` to init the react query TRPC client ? The docs guide does not talk about `@trpc/react-query` but only `@trpc/tanstack-react-query` ?\n3. Can i use `useQueryClient()` from plain `@tanstack/react-query` instead ?\n ```tsx\n import {useQueryClient} from '@tanstack/react-query';\n\n // ...\n\n const queryClient = useQueryClient();\n const dataQuery = useQuery(trpc.QUERY.queryOptions());\n const mutationData = useMutation(trpc.MUTATION.mutationOptions({\n onSuccess: () => {\n queryClient.invalidateQueries({ queryKey: trpc.QUERY.queryKey() });\n }\n }));\n ```",[],6729,"bug: trpc.useUtils do not exists","2025-04-28T18:53:50Z","https://github.com/trpc/trpc/issues/6729",0.6642274,{"description":3101,"labels":3102,"number":3109,"owner":3022,"repository":3022,"state":3033,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Provide environment information\n\n```\nSystem:\n OS: macOS 15.1.1\n CPU: (10) arm64 Apple M1 Max\n Memory: 1.83 GB / 32.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node\n Yarn: 1.22.22 - /opt/homebrew/bin/yarn\n npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm\n Browsers:\n Chrome: 132.0.6834.160\n Safari: 18.1.1\n npmPackages:\n @tanstack/react-query: ^5.24.1 => 5.65.1 \n @trpc/client: 11.0.0-rc.730 => 11.0.0-rc.730+776d07336 \n @trpc/next: 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: 14.2.3 => 14.2.3 \n react: 18.2.0 => 18.2.0 \n typescript: ^5.7.2 => 5.7.3 \n```\n\n### Describe the bug\n\nHello, and thank you for all your great work on this. We have run into a mysterious issue, that was initially a copy of https://github.com/trpc/trpc/issues/6374. We had initialized our `react-query` and tRPC clients per the [official docs](https://trpc.io/docs/client/react/setup), but were also using a `useEffect` to update some items used in our tRPC headers.\n\nWe removed the `useEffect` (as the headers are an `async` function anyway), and the untyped client error went away. However, we are now seeing `TRPCClientError: Headers is not defined`, although logging the headers in our React Native `AppContainer` component shows all the headers with values as expected.\n\nHere is our AppContainer:\n\n```ts\nconst AppContainer = () => {\n const [userID, setUserID] = useState('')\n\n // Navigation refs\n const navigationRef = useNavigationContainerRef\u003CRootStackParamList>()\n const routeNameRef = useRef\u003Cstring>()\n\n // Cached resources and color scheme\n const trpcUrl = useSessionStore((state) => state.trpcUrl)\n const userId = useSessionStore((state) => state.userId)\n\n // Device info\n const deviceBrand = Device.brand\n const deviceOS = Device.osName\n const deviceOSVersion = Device.osVersion\n const deviceModel = Device.modelName\n\n // tRPC and query clients\n const queryClient = new QueryClient()\n const [trpcClient] = useState(() =>\n trpc.createClient({\n links: [\n loggerLink({\n enabled: (opts) =>\n (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') ||\n (opts.direction === 'down' && opts.result instanceof Error),\n console: {\n log: () => {\n // noop\n },\n error: (...args) => {\n logTrpcError(args)\n },\n },\n }),\n httpLink({\n url: trpcUrl,\n headers: async () => {\n // From AsyncStorage\n const customToken = await getItem('customToken')\n\n return {\n 'app-version': version,\n 'content-type': 'application/json',\n 'device-brand': deviceBrand || 'unknown',\n 'device-model': deviceModel || 'unknown',\n 'device-os-version': deviceOSVersion || 'unknown',\n 'device-os': deviceOS || 'unknown',\n 'custom-token': customToken || 'anonymous',\n 'user-id': userId || 'anonymous',\n }\n },\n }),\n ],\n }),\n )\n\n return (\n \u003Ctrpc.Provider client={trpcClient} queryClient={queryClient}>\n \u003CQueryClientProvider client={queryClient}>\n ...\n \u003C/QueryClientProvider>\n \u003C/trpc.Provider>\n )\n}\n```\n\nWe do not require any SSR in our project. Thank you very much for your time!\n\n### Link to reproduction\n\nN/A\n\n### To reproduce\n\nUnsure how to reproduce.\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!",[3103,3104,3105,3106,3107],{"name":3069,"color":3070},{"name":3042,"color":3043},{"name":3076,"color":3077},{"name":3019,"color":3020},{"name":3108,"color":3074},"⏳ close if no activity",6449,"bug: TRPCClientError \"Headers is not defined\"","2025-02-13T00:07:21Z","https://github.com/trpc/trpc/issues/6449",0.66630584,{"description":3115,"labels":3116,"number":3122,"owner":3022,"repository":3022,"state":3033,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Provide environment information\n\n System:\r\n OS: Windows 11 10.0.22631\r\n CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor\r\n Memory: 10.76 GB / 31.95 GB\r\n Binaries:\r\n Node: 18.19.1 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 10.2.4 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 8.15.4 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (130.0.2849.68)\r\n Internet Explorer: 11.0.22621.3527\r\n npmPackages:\r\n @tanstack/react-query: ^5.60.6 => 5.60.6\r\n @trpc/client: ^11.0.0-rc.638 => 11.0.0-rc.638+09a76869e\r\n @trpc/react-query: ^11.0.0-rc.638 => 11.0.0-rc.638+09a76869e\r\n @trpc/server: ^11.0.0-rc.638 => 11.0.0-rc.638+09a76869e\r\n next: 15.0.3 => 15.0.3\r\n react: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106\r\n typescript: ^5 => 5.6.3\r\n\n\n### Describe the bug\n\nAfter creating an object from the method \"createTRPCReact\" there is no the method \"createClient\" or any procedures in it.\r\n\r\n`const trpc = createTRPCReact\u003CAppRouter>();\r\n\r\ntrpc.\u003C...no createClient or procedures..>`\r\n\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-is5mgb?file=src%2Fserver%2Ftrpc.ts\n\n### To reproduce\n\nIt's easy to reproduce - clean Nextjs project and instructions from quickstart from react query integration\n\n### Additional information\n\nI investigated working code from @jherr [repo](https://github.com/jherr/trpc-on-the-app-router.git) the file createTRPCReact.tsx was much changed - almost 300 rows were added and the main method \"createTRPCReact\" was changed\r\n\r\n/------ working version of the method --------/\r\n`export function createTRPCReact\u003C\r\n TRouter extends AnyRouter,\r\n TSSRContext = unknown,\r\n TFlags = null,\r\n>(\r\n opts?: CreateTRPCReactOptions\u003CTRouter>,\r\n): CreateTRPCReact\u003CTRouter, TSSRContext, TFlags> {\r\n const hooks = createHooksInternal\u003CTRouter, TSSRContext>(opts);\r\n const proxy = createHooksInternalProxy\u003CTRouter, TSSRContext, TFlags>(hooks);\r\n\r\n return proxy as any;\r\n}`\r\n/------------------------------------------------/\r\n\r\n/---------------- not working -----------------/\r\n`export function createTRPCReact\u003C\r\n TRouter extends AnyRouter,\r\n TSSRContext = unknown,\r\n>(\r\n opts?: CreateTRPCReactOptions\u003CTRouter>,\r\n): CreateTRPCReact\u003CTRouter, TSSRContext> {\r\n const hooks = createRootHooks\u003CTRouter, TSSRContext>(opts);\r\n const proxy = createHooksInternal\u003CTRouter, TSSRContext>(hooks);\r\n\r\n return proxy as any;\r\n}\r\n`\r\n\r\n\n\n### 👨👧👦 Contributing\n\n- [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[3117,3118,3119,3120,3121],{"name":3042,"color":3043},{"name":3073,"color":3074},{"name":3076,"color":3077},{"name":3019,"color":3020},{"name":3108,"color":3074},6252,"bug: Can't create \"createClient\" after creating \"createTRPCReact\u003CAppRouter>()\"","2025-03-20T15:42:43Z","https://github.com/trpc/trpc/issues/6252",0.6672151,["Reactive",3128],{},["Set"],["ShallowReactive",3131],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0ySGCrvA4s_shEQU-PFGkB-3xfInywKWEC1Y3RLTjHE":-1},"/trpc/trpc/6724"]