\n\n### Link to reproduction\n\n---\n\n### To reproduce\n\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!",[2892],{"name":2870,"color":2871},6737,"bug: cannot narrow input types of `useMutation(trpc...).mutate(INPUT)` - cannot overwrite `mutationoptions.mutationFn` (`@trpc/tanstack-react-query`)","2025-05-01T18:59:50Z","https://github.com/trpc/trpc/issues/6737",0.68426377,{"description":2899,"labels":2900,"number":2905,"owner":2860,"repository":2860,"state":2884,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Provide environment information\n\n```\nSystem:\n OS: macOS 15.4\n CPU: (10) arm64 Apple M1 Max\n Memory: 7.85 GB / 64.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node\n npm: 11.2.0 - ~/.nvm/versions/node/v22.11.0/bin/npm\n Watchman: 2024.11.04.00 - /opt/homebrew/bin/watchman\n Browsers:\n Brave Browser: 133.1.75.181\n Chrome: 135.0.7049.41\n Safari: 18.4\n Safari Technology Preview: 18.4\n npmPackages:\n @tanstack/react-query: ^5.67.1 => 5.72.2 \n @trpc/client: ^11.0.0 => 11.0.4 \n @trpc/server: ^11.0.0 => 11.0.4 \n next: ^15.0.0 => 15.3.0 \n react: ^19.0.0 => 19.1.0 \n typescript: ^5.8.2 => 5.8.3\n```\n\n### Describe the bug\n\nWhen using the `useSubscription` hook from the new `@trpc/tanstack-react-query` integration, the `onConnectionStateChange` callback never fires. However, the `subscription.status` value does update as expected.\n\nI believe this is happening because the `useSubscription` hook implementation does not appear to be calling the user-provided `onConnectionStateChange` callback. See [L202](https://github.com/trpc/trpc/blob/main/packages/tanstack-react-query/src/internals/subscriptionOptions.ts#L202), where `updateState` is being called in a similar fashion as `onStarted` / `onData` / `onError`. However, in these other cases, there is a call to the user-provided callback in addition to `updateState`:\n\n```ts\noptsRef.current.onError?.(error);\nupdateState((prev) => {\n // ...\n})\n```\n\nHowever, in the `onConnectionStateChange` block, it looks like we are missing this call, which should appear on line 203:\n\n```ts\noptsRef.current.onConnectionStateChange?.(result);\n```\n\nIn fact, there does not appear to be any reference to `optsRef.current.onConnectionStateChange` anywhere in the hook implementation.\n\n### Link to reproduction\n\nhttps://stackblitz.com/github/trpc/examples-next-minimal-starter\n\n### To reproduce\n\n1. Provide a `onConnectionStateChange` callback to `subscriptionOptions` when creating a subscription.\n2. Take any action that would normally trigger a connection state change, such as shutting down the local development server.\n3. Observe that `subscription.status` (as returned from the `useSubscription` hook) will update to reflect this change (likely because the hook is calling `updateState`) but `onConnectionStateChange` is never called.\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!",[2901,2904],{"name":2902,"color":2903},"🙋♂️ help wanted","008672",{"name":2870,"color":2871},6693,"bug: `useSubscription` never calls `onConnectionStateChange`","2025-05-30T21:10:48Z","https://github.com/trpc/trpc/issues/6693",0.6942225,{"description":2911,"labels":2912,"number":2917,"owner":2860,"repository":2860,"state":2884,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Provide environment information\n\n```\nSystem:\n OS: macOS 15.3\n CPU: (8) arm64 Apple M2\n Memory: 2.18 GB / 24.00 GB\n Shell: 3.2.57 - /bin/sh\n Binaries:\n Node: 22.12.0 - /usr/local/bin/node\n npm: 11.0.0 - /usr/local/bin/npm\n pnpm: 9.15.4 - /usr/local/bin/pnpm\n Browsers:\n Brave Browser: 132.1.74.48\n Safari: 18.3\n npmPackages:\n @tanstack/react-query: ^5.65.1 => 5.65.1 \n @trpc/client: 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: 15.1.6 => 15.1.6 \n react: ^19.0.0 => 19.0.0 \n typescript: ^5 => 5.7.3 \n```\n\n### Describe the bug\n\nI write protected `procedures` and throwing error from middleware-\n\n```\nimport { initTRPC, TRPCError } from \"@trpc/server\";\n\n//Context\nimport { Context } from \"./context\";\n\n\nconst t = initTRPC.context\u003CContext>().create();\n\nexport const router = t.router;\nexport const procedure = t.procedure.use(\n async function isAuthed(opts) {\n const { ctx } = opts;\n if (!ctx.user) {\n throw new TRPCError({ code: \"UNAUTHORIZED\", message: \"Unauthorized request. Please login\" })\n }\n return opts.next({\n ctx: {\n user: ctx.user\n }\n })\n }\n);\nexport const publicProcedure = t.procedure;\nexport const createCallerFactory = t.createCallerFactory;\n```\n\nHere I throw error for unauthorized request. There this is createContext-\n\nimport { getSession } from \"../auth/next-auth\";\n\nexport const createContext = async () => {\n const user = await getSession();\n return user;\n}\n\nexport type Context = Awaited\u003CReturnType\u003Ctypeof createContext>>;\n\nAnd on a now server page component-\nI just prefetch one request-\n\n```\n//TRPC\nimport { trpc, HydrateClient } from \"@/trpc/server\";\n\nconst Page = async () => {\n //TRPC\n await trpc.unavailability.list.prefetch();\n\n return (\n \u003CHydrateClient>\n \u003CList />\n \u003C/HydrateClient>\n );\n};\n\nexport default Page;\n```\nAll is working on local development is perfect. But when I try to build it-\n\n```\nError occurred prerendering page \"/unavailability\". Read more: https://nextjs.org/docs/messages/prerender-error\nTRPCClientError: Unauthorized request. Please login\n at s.from (/vercel/path0/.next/server/chunks/949.js:3:83107)\n at /vercel/path0/.next/server/chunks/949.js:3:89907\n at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\nExport encountered an error on /(dashboard)/unavailability/page: /unavailability, exiting the build.\n ⨯ Static worker exited with code: 1 and signal: null\n ELIFECYCLE Command failed with exit code 1.\nError: Command \"pnpm run build\" exited with 1\n\n```\n\n\nSo, it is natural that on build time, there is no authentications. But it stopping to build it-\n\n\n\n\n### Link to reproduction\n\nhttps://github.com/wegreet/dashboard-new-design\n\n### To reproduce\n\nJust build it with vercel\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!",[2913,2916],{"name":2914,"color":2915},"👻 invalid","e4e669",{"name":2870,"color":2871},6441,"bug: TRPC with nextjs 15(App Router) production build failed!","2025-02-05T17:24:47Z","https://github.com/trpc/trpc/issues/6441",0.6947438,{"description":2923,"labels":2924,"number":2925,"owner":2860,"repository":2860,"state":2884,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 12.6\r\n CPU: (10) x64 Apple M1 Max\r\n Memory: 95.50 MB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm\r\n Browsers:\r\n Chrome: 108.0.5359.98\r\n Safari: 16.0\r\n npmPackages:\r\n @tanstack/react-query: ^4.16.0 => 4.19.1 \r\n @trpc/client: ^10.0.0 => 10.5.0 \r\n @trpc/next: ^10.0.0 => 10.5.0 \r\n @trpc/react-query: ^10.0.0 => 10.5.0 \r\n @trpc/server: ^10.0.0 => 10.5.0 \r\n next: 13.0.2 => 13.0.2 \r\n react: 18.2.0 => 18.2.0 \r\n typescript: ^4.8.4 => 4.9.4 \r\n\r\n```\n\n### Describe the bug\n\nI want to use a \"suspended\" query in combination with `next-auth`. \r\n\r\nFor this I created a `protectedProcedure` like this:\r\n\r\n```ts\r\nconst isAuthed = t.middleware(({ ctx, next }) => {\r\n if (!ctx.session || !ctx.session.user) {\r\n throw new TRPCError({ code: \"UNAUTHORIZED\" });\r\n }\r\n return next({\r\n ctx: {\r\n // infers the `session` as non-nullable\r\n session: { ...ctx.session, user: ctx.session.user },\r\n },\r\n });\r\n});\r\n\r\nexport const protectedProcedure = t.procedure.use(isAuthed);\r\n```\r\n\r\nand am using it in my router:\r\n\r\n```ts\r\ngetSecretMessage: protectedProcedure.query(() => {\r\n return \"you can now see this secret message!\";\r\n}),\r\n```\r\n\r\nMy expectation would be that this query gets authorized even with `{suspense: true}` which is unfortunately not the case. \r\nUsing it without suspense returns the correct data and I have a session in in my context.\r\n\r\n```ts\r\nconst { data: secretMessage } = trpc.auth.getSecretMessage.useQuery(\r\n undefined, // no input\r\n );\r\n```\r\n\r\nAs soon as I add the `suspense` flag it is not working anymore and the session is always null which results in an unauthorized error\r\n\r\n```ts\r\nconst { data: secretMessage } = trpc.auth.getSecretMessage.useQuery(\r\n undefined, // no input\r\n {suspense: true}\r\n );\r\n```\r\nIt is the same behaviour with `useSuspenseQuery`.\r\n\n\n### Link to reproduction\n\nhttps://github.com/engelkes-finstreet/next-auth-trpc-suspense\n\n### To reproduce\n\nUnfortunately I could not get the example running on Stackblitz / Codesandbox so I hope a link to my GitHub-Repository is enough as well.\r\n\r\nCheck out the repository and add any provider inside `pages/api/auth/[...nextauth].ts` and add these credentials to a `.env` file. You can copy the `.env.example` for it. Afterwards run `npx prisma migrate dev` and start the dev server with `npm run dev`. \r\nOn the index page is a `sign in` button which you can click and sign in with your given provider. After the redirect back to the index page try to refresh the page and you will see that the authorization error occurs. \r\nNow you can go ahead and remove the `{ suspense: true }` from the query and refresh the page. Now you will see the secret message.\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!",[],3386,"bug: ","2022-12-28T00:05:20Z","https://github.com/trpc/trpc/issues/3386",0.69688994,{"description":2931,"labels":2932,"number":2934,"owner":2860,"repository":2860,"state":2884,"title":2935,"updated_at":2936,"url":2937,"score":2938},"> From @KATT:\r\n>\r\n> We should `Omit` `mutationFn` etc from `UseMutationOptions` (and for queries too)\r\n>\r\n\r\n\r\n### Provide environment information\r\n\r\n```\r\n System:\r\n OS: macOS 13.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 123.95 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.16.1 - /usr/local/bin/node\r\n Yarn: 1.22.17 - /usr/local/bin/yarn\r\n npm: 9.5.1 - /usr/local/bin/npm\r\n pnpm: 8.6.10 - /opt/homebrew/bin/pnpm\r\n Watchman: 2022.06.27.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 117.0.5938.92\r\n Safari: 16.6\r\n npmPackages:\r\n @tanstack/react-query: ^4.29.5 => 4.29.14 \r\n @trpc/client: ^10.21.1 => 10.23.0 \r\n @trpc/next: ^10.23.0 => 10.23.0 \r\n @trpc/react-query: ^10.21.1 => 10.23.0 \r\n @trpc/server: ^10.21.1 => 10.23.0 \r\n next: ^13.3.4 => 13.3.4 \r\n react: ^18.2.0 => 18.2.0 \r\n typescript: ^5.0.4 => 5.0.4 \r\n ```\r\n\r\n### Describe the bug\r\n\r\n`mutationFn` is not being called on `mutate.` My use-case is I need to add some variables from localStorage to my payload before it gets sent off in the mutation. `mutationFn` is never called, though `onSuccess` is.\r\n\r\n```\r\nexport const trpc = createTRPCNext({...})\r\n```\r\n\r\n```\r\n const mutation = trpc.auth.verifyCode.useMutation({\r\n mutationFn: async (variables) => {\r\n console.log('called'); // NEVER CALLED\r\n const extendedVariables = {\r\n ...variables,\r\n referralCode: maybeReferralCode,\r\n ...validatedUtm,\r\n };\r\n return trcpProxyClient.auth.verifyCode.mutate(extendedVariables);\r\n },\r\n\r\n onSuccess(data) {\r\n console.log('called2'); // CALLED\r\n storage.setAccessToken(data.accessToken);\r\n storage.setRefreshToken(data.refreshToken);\r\n\r\n identify(data);\r\n },\r\n });\r\n\r\n return mutation;\r\n};\r\n```\r\n\r\n### Link to reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ucxmx2?file=src%2Fpages%2Findex.tsx\r\n\r\n### To reproduce\r\n\r\nSee example user mutation `updateUser`\r\n\r\nhttps://stackblitz.com/edit/github-ucxmx2?file=src%2Fpages%2Findex.tsx\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!",[2933],{"name":2914,"color":2915},4860,"bug: mutationFn being ignored","2025-03-20T15:41:56Z","https://github.com/trpc/trpc/issues/4860",0.69849867,{"description":2940,"labels":2941,"number":2949,"owner":2860,"repository":2860,"state":2884,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### 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!",[2942,2943,2944,2945,2946],{"name":2902,"color":2903},{"name":2914,"color":2915},{"name":2881,"color":2882},{"name":2870,"color":2871},{"name":2947,"color":2948},"⏳ close if no activity","d4c5f9",6449,"bug: TRPCClientError \"Headers is not defined\"","2025-02-13T00:07:21Z","https://github.com/trpc/trpc/issues/6449",0.69956577,{"description":2955,"labels":2956,"number":2965,"owner":2860,"repository":2860,"state":2884,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Provide environment information\n\n```\r\nSystem:\r\n OS: macOS 14.7\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 541.69 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.15.0 - ~/.local/state/fnm_multishells/91576_1729759671410/bin/node\r\n Yarn: 1.22.19 - ~/Library/pnpm/yarn\r\n npm: 10.7.0 - ~/.local/state/fnm_multishells/91576_1729759671410/bin/npm\r\n pnpm: 9.12.1 - ~/Library/pnpm/pnpm\r\n bun: 1.1.30 - /opt/homebrew/bin/bun\r\n Browsers:\r\n Chrome: 130.0.6723.70\r\n Edge: 130.0.2849.56\r\n Safari: 18.0.1\r\n npmPackages:\r\n @tanstack/react-query: 5.51.15 => 5.51.15\r\n @trpc/client: 11.0.0-rc.467 => 11.0.0-rc.467+8f72171d6\r\n @trpc/react-query: 11.0.0-rc.467 => 11.0.0-rc.467+8f72171d6\r\n @trpc/server: 11.0.0-rc.467 => 11.0.0-rc.467+8f72171d6\r\n next: 14.1.0 => 14.1.0\r\n react: 18.3.1 => 18.3.1\r\n\ttypescript: 5.5.4 => 5.5.4\r\n````\n\n### Describe the bug\n\n## Context\r\nWe use tRPC in a monorepo containing :\r\n- one backed using Fastify with tRPC plugin\r\n- multiple frontends consuming this backend\r\n\r\nWe are building some kind of big funnel/stepper with some global progress state.\r\nWe get this global progress state from a database and inject it inside the `ctx` using tRPC middleware to access it inside queries/mutations.\r\nWe throw `TRPCError`s inside our queries/mutations and handle them inside the `onError` callback defined in the tRPC adapter.\r\n\r\n## BUG\r\nInside the `onError` handler, the `ctx` does not contain data injected to procedures via middlewares. \r\nWe only have access to the \"global\" context, instantiated with the Fastify adapter and not to the one injected via middleware.\r\n\r\n\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-y9mdyw?file=src%2Fpages%2Fapi%2Ftrpc%2F%5Btrpc%5D.ts\n\n### To reproduce\n\nStackblitz link should be self-explanatory.\r\nI just created a global context with a `globalContextValue` accessible inside procedure and `onError` handler.\r\nNevertheless `injectedContextValue` is accessible inside procedure but not inside `onError` handler.\n\n### Additional information\n\nI think the problem relies on the architecture of the error handling, where the `catch` does happen outside the procedure and we do not have access to it's enhanced context.\r\n\r\nThe bug is not specific to Fastify adapter implementation because I managed to reproduce it using the `next-minimal-starter` on Stackblitz\r\n\r\n## QUESTIONS\r\n1. Is it expected behavior ? I cannot see it documented in the website nor inside issues.\r\n2. How could we fix our problem ?\r\n- One solution would be to inject the global context inside the Error cause. We want to avoid this as we already use this to provide context specific to the error (not contained in global progress data). \r\n- Could we somehow catch the error ourselves and augment it with data before we loose injected context ?\r\n\r\nI would love to contribute/help if I can !\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[2957,2960,2961,2964],{"name":2958,"color":2959},"📚 documentation / examples","0075ca",{"name":2914,"color":2915},{"name":2962,"color":2963},"wontfix","ffffff",{"name":2947,"color":2948},6157,"bug: Cannot access context injected via middleware in onError handler","2025-03-20T15:42:40Z","https://github.com/trpc/trpc/issues/6157",0.6998157,["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYw39EctegrEbsHhCqeMPVLwFxzRz2YzjtHEeAOalVnA":-1},"/trpc/trpc/4121"]