\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!",[3216],{"name":3185,"color":3186},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":3223,"labels":3224,"number":3229,"owner":3175,"repository":3175,"state":3208,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### 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!",[3225,3228],{"name":3226,"color":3227},"🙋♂️ help wanted","008672",{"name":3185,"color":3186},6693,"bug: `useSubscription` never calls `onConnectionStateChange`","2025-05-30T21:10:48Z","https://github.com/trpc/trpc/issues/6693",0.6942225,{"description":3235,"labels":3236,"number":3241,"owner":3175,"repository":3175,"state":3208,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### 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!",[3237,3240],{"name":3238,"color":3239},"👻 invalid","e4e669",{"name":3185,"color":3186},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":3247,"labels":3248,"number":3249,"owner":3175,"repository":3175,"state":3208,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### 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":3255,"labels":3256,"number":3258,"owner":3175,"repository":3175,"state":3208,"title":3259,"updated_at":3260,"url":3261,"score":3262},"> 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!",[3257],{"name":3238,"color":3239},4860,"bug: mutationFn being ignored","2025-03-20T15:41:56Z","https://github.com/trpc/trpc/issues/4860",0.69849867,{"description":3264,"labels":3265,"number":3273,"owner":3175,"repository":3175,"state":3208,"title":3274,"updated_at":3275,"url":3276,"score":3277},"### 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":3226,"color":3227},{"name":3238,"color":3239},{"name":3205,"color":3206},{"name":3185,"color":3186},{"name":3271,"color":3272},"⏳ 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,["Reactive",3279],{},["Set"],["ShallowReactive",3282],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYw39EctegrEbsHhCqeMPVLwFxzRz2YzjtHEeAOalVnA":-1},"/trpc/trpc/4121"]