}\n \u003C/Provider>\n {/* \u003C/TRPCProvider> */}\n \u003C/QueryClientProvider>\n );\n};\n\nexport default AppProvider;\n```\n\n**React Query**\n```typescript\nimport {\n defaultShouldDehydrateQuery,\n QueryClient,\n} from \"@tanstack/react-query\";\nimport SuperJSON from \"superjson\";\n\nexport const createQueryClient = () =>\n new QueryClient({\n defaultOptions: {\n queries: {\n // With SSR, we usually want to set some default staleTime\n // above 0 to avoid refetching immediately on the client\n staleTime: 360 * 1000,\n },\n dehydrate: {\n serializeData: SuperJSON.serialize,\n shouldDehydrateQuery: (query) =>\n defaultShouldDehydrateQuery(query) ||\n query.state.status === \"pending\",\n },\n hydrate: {\n deserializeData: SuperJSON.deserialize,\n },\n },\n });\n````\n\n**Page.tsx**\n```typescript\n\"use client\";\nimport { api } from \"@c/Provider\";\n// import { useTRPC } from \"@c/Provider\";\nimport { useSession } from \"@hwa/client\";\n// import { useQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/navigation\";\n\nconst Home = () => {\n const router = useRouter();\n const session = useSession();\n // const trpc = useTRPC();\n // const { data } = useQuery(trpc.message.getMessage.queryOptions());\n const { data } = api.message.getMessage.useQuery(); // message is undefined\n return (\n \u003Cdiv className=\"\">\n \u003Cp>{data}\u003C/p>\n \u003Cpre\n style={{\n padding: \"10px\",\n fontFamily: \"monospace\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {JSON.stringify(session, null, 2)}\n \u003C/pre>\n \u003Cbutton\n className=\"rounded border px-6 py-1\"\n onClick={() => router.refresh()}\n >\n Refresh\n \u003C/button>\n \u003C/div>\n );\n};\n\nexport default Home;\n\n```\n\n### Link to reproduction\n\nhttps://github.com/SamJbori/hwaTurbo\n\n### To reproduce\n\nCreate a split BE and FE with Turbo Repo\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!",[3172],{"name":3173,"color":3174},"🐛 bug: unconfirmed","e99695",6933,"trpc","open","bug: createTRPCReact return undefined routers on split FE/BE","2025-09-06T23:01:14Z","https://github.com/trpc/trpc/issues/6933",0.6364595,{"description":3183,"labels":3184,"number":3186,"owner":3176,"repository":3176,"state":3177,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Provide environment information\n\n```\n System:\n OS: macOS 14.5\n CPU: (8) arm64 Apple M1\n Memory: 71.92 MB / 8.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 24.7.0 - /opt/homebrew/bin/node\n npm: 11.5.1 - /opt/homebrew/bin/npm\n pnpm: 9.15.0 - /opt/homebrew/bin/pnpm\n Browsers:\n Brave Browser: 140.1.82.166\n Safari: 17.5\n npmPackages:\n @tanstack/react-query: ^5.89.0 => 5.89.0 \n @trpc/client: ^11.5.1 => 11.5.1 \n @trpc/server: ^11.5.1 => 11.5.1 \n next: 15.5.3 => 15.5.3 \n react: 19.1.0 => 19.1.0 \n typescript: ^5 => 5.9.2 \n```\n\n### Describe the bug\n\nWhen using `useSuspenseQuery`, the options in the TRPC context are undefined (whereas for `useQuery` and `useMutation` these options are defined).\n\nIt seems this issue was already fixed in https://github.com/trpc/trpc/pull/6178, but got reintroduced with the new TanStack React Query integration.\n\n### Link to reproduction\n\nhttps://github.com/cmayoracurzio/trpc-next-use-suspense-query-bug\n\n### To reproduce\n\n1. Clone the reproduction example Next.js repo.\n2. Run `npm run dev`.\n3. Notice that the example query fetched with `useSuspenseQuery` results in the context options being undefined.\n4. Notice that the example mutation triggered with the button and `useMutation` results in defined context options instead.\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!",[3185],{"name":3173,"color":3174},6953,"bug: useSuspenseQuery does not forward TRPC options to context","2025-09-21T18:55:41Z","https://github.com/trpc/trpc/issues/6953",0.6746003,{"description":3192,"labels":3193,"number":3195,"owner":3176,"repository":3176,"state":3196,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Provide environment information\r\n\r\n``` System:\r\n OS: macOS 13.5.2\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 135.30 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.8.1 - /usr/local/bin/npm\r\n pnpm: 8.7.6 - /usr/local/bin/pnpm\r\n Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 116.0.5845.187\r\n Edge: 117.0.2045.31\r\n Safari: 16.6\r\n npmPackages:\r\n @tanstack/react-query: ^4.35.3 => 4.35.3 \r\n @trpc/client: ^10.38.4 => 10.38.4 \r\n @trpc/next: ^10.38.4 => 10.38.4 \r\n @trpc/react-query: ^10.38.4 => 10.38.4 \r\n @trpc/server: ^10.38.4 => 10.38.4 \r\n next: ^13.5.2 => 13.5.2 \r\n react: ^18.2.0 => 18.2.0 \r\n typescript: ^5.2.2 => 5.2.2\r\n ```\r\n\r\n### Describe the bug\r\n\r\nI'm trying to do SSR with suspense and forward http cookies to have authentification working. But I'm not able to access the request because `ctx` is undefined:\r\n\r\n```ts\r\nexport const trpc = createTRPCNext\u003CAppRouter>({\r\n config({ ctx }) {\r\n console.log(\"ctx:\", ctx) // ctx should not be undefined on SSR but it's undefined\r\n return {\r\n links: [\r\n httpBatchLink({\r\n url: `${getBaseUrl()}/api/trpc`,\r\n }),\r\n ],\r\n ssr: true\r\n }\r\n },\r\n})\r\n```\r\n\r\n### Link to reproduction\r\n\r\nhttps://codesandbox.io/p/github/testerez/trpc-suspense-experiment/main?file=%2Fsrc%2Futils%2Ftrpc.ts%3A33%2C1-34%2C1&workspaceId=9cf281d6-f7b0-4c9f-a2e7-dcb68787669d\r\n\r\n### To reproduce\r\n\r\nCheck in the dev console, you should see:\r\n```\r\nctx: undefined\r\n```\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!",[3194],{"name":3173,"color":3174},4826,"closed","bug: ctx is undefined in createTRPCNext config callback","2025-03-20T15:41:56Z","https://github.com/trpc/trpc/issues/4826",0.6254465,{"description":3202,"labels":3203,"number":3207,"owner":3176,"repository":3176,"state":3196,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Provide environment information\r\n\r\n System:\r\n OS: macOS 13.0\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 4.32 GB / 64.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm\r\n Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 108.0.5359.71\r\n Firefox: 107.0\r\n Safari: 16.1\r\n npmPackages:\r\n @tanstack/react-query: ^4.18.0 => 4.18.0 \r\n @trpc/client: ^10.4.1 => 10.4.1 \r\n @trpc/react-query: ^10.4.1 => 10.4.1 \r\n @trpc/server: ^10.4.1 => 10.4.1 \r\n next: ^13.0.4 => 13.0.5 \r\n react: 18.1.0 => 18.1.0 \r\n typescript: ^4.6.3 => 4.9.3 \r\n\r\n\r\n### Describe the bug\r\n\r\n\r\nSo is my app.tsx\r\n\r\n```\r\nexport default function App() {\r\n return (\r\n \u003CAuthenticationProvider>\r\n \u003CTRPCProvider>\r\n \u003CThemeProvider theme={theme}>\r\n \u003CNavigationContainer>\r\n \u003CStack.Navigator>\r\n \u003CStack.Screen name=\"Criteria\" component={MovieSearchComponent}/>\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",[3204],{"name":3205,"color":3206},"👻 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":3213,"labels":3214,"number":3215,"owner":3176,"repository":3176,"state":3196,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### 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":3221,"labels":3222,"number":3223,"owner":3176,"repository":3176,"state":3196,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### 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":3229,"labels":3230,"number":3242,"owner":3176,"repository":3176,"state":3196,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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!",[3231,3234,3235,3238,3241],{"name":3232,"color":3233},"🙋♂️ help wanted","008672",{"name":3205,"color":3206},{"name":3236,"color":3237},"🔎 needs more investigation/info","d4c5f9",{"name":3239,"color":3240},"⏮ needs reproduction","000055",{"name":3173,"color":3174},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":3248,"labels":3249,"number":3250,"owner":3176,"repository":3176,"state":3196,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### 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":3256,"labels":3257,"number":3258,"owner":3176,"repository":3176,"state":3196,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### 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":3264,"labels":3265,"number":3272,"owner":3176,"repository":3176,"state":3196,"title":3273,"updated_at":3274,"url":3275,"score":3276},"### 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!",[3266,3267,3268,3269,3270],{"name":3232,"color":3233},{"name":3205,"color":3206},{"name":3239,"color":3240},{"name":3173,"color":3174},{"name":3271,"color":3237},"⏳ 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,["Reactive",3278],{},["Set"],["ShallowReactive",3281],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0ySGCrvA4s_shEQU-PFGkB-3xfInywKWEC1Y3RLTjHE":-1},"/trpc/trpc/6724"]