\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!",[3171],{"name":3172,"color":3173},"π bug: unconfirmed","e99695",6924,"trpc","open","bug: wrong types in the new trpc react-query client","2025-09-03T09:28:51Z","https://github.com/trpc/trpc/issues/6924",0.64767724,{"description":3182,"labels":3183,"number":3187,"owner":3175,"repository":3188,"state":3176,"title":3189,"updated_at":3190,"url":3191,"score":3192},"# The React API\r\n\r\n\r\n## Suggestion A) Similar to existing API\r\n\r\n\r\n\r\n```tsx\r\nconst trpc = createReactQueryHooks\u003CAppRouter>()\r\n\r\nconst {queries, mutations, useQuery, useMutation} = trpc;\r\n\r\n/// usage\r\n\r\nfunction MyComponent() {\r\n // you can CMD+Click `postById` and jump straight to the backend resolver\r\n const query1 = useQuery([queries.postById, { id: 1 }], { /* react-query opts */ })\r\n\r\n // Also same query and will be usable, but you lose jump to definition\r\n const query2 = useQuery(['postById', { id: 1 }], { /* react-query opts */ })\r\n\r\n\r\n const mutation1 = useMutation(mutations.postUpdate); // \u003C-- jump to definition by clicking `postUpdate`\r\n const mutation2 = useMutation('updatePost');\r\n\r\n // later used as `mutation.mutate(input)` or `mutation.mutateAsync(input)`\r\n\r\n}\r\n```\r\n\r\n\r\n## Suggestion B) Pseudo-call within hook\r\n\r\n```tsx\r\ntrpc.useQuery(client.query.postById({ id: 1 }), { /* react-query options */ })\r\n```\r\n\r\n\r\n## Suggestion C) Skipping the tuple\r\n\r\n\r\nRelated decision\r\n\r\n- Revive https://github.com/trpc/trpc/pull/1058\r\n- Add new `input` argument onto the react-query options\r\n - If optional, keep optional, if required, require to pass opts\r\n\r\n```tsx\r\nconst trpc = createReactQueryHooks\u003CAppRouter>()\r\n\r\nconst {queries, mutations, useQuery, useMutation} = trpc;\r\n\r\n/// usage\r\n\r\nfunction MyComponent() {\r\n // you can CMD+Click `postById` and jump straight to the backend resolver\r\n const query1 = useQuery(queries.postById, { \r\n input: { id: 1 }, \r\n /* [...] other react-query opts */\r\n }) \r\n\r\n // Also same query and will be usable, but you lose jump to definition\r\n const query2 = useQuery('postById', {\r\n input: { id: 1 },\r\n /* [...] other react-query opts */\r\n }) \r\n}\r\n```\r\n",[3184],{"name":3185,"color":3186},"β RFC","008672",27,"v10-playground","Chapter 4) The React `useQuery()` / `useMutation`","2022-04-12T12:43:52Z","https://github.com/trpc/v10-playground/issues/27",0.64857,{"description":3194,"labels":3195,"number":3202,"owner":3175,"repository":3175,"state":3176,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Describe the feature you'd like to request\r\n\r\nI would like trpc query keys to have some prefix (e.g. 'trpc') to make it easy to identify them when setting up a QueryClient. This is useful when the query client is not only used for trpc. A simple example:\r\n```ts\r\n queryClient.setMutationDefaults(getQueryKey(trpc), {\r\n onSuccess: () => {\r\n trpcUtils.invalidate();\r\n },\r\n });\r\n```\r\nCurrently, `getQueryKey(trpc)` simply returns `[]`, meaning that any mutation would invalidate all react-query queries, not only trpc queries. Being able to specify a prefix (or just having a prefix in general) would make it return `[prefix]`, making it possible to distinguish between trpc queries and other queries.\r\n\r\nI'm sure there are other (perhaps more useful) use cases than this\r\n\r\n### Describe the solution you'd like to see\r\n\r\nEither a built in `trpc` prefix for all query keys, or a way to specify a prefix\r\n\r\n### Describe alternate solutions\r\n\r\nI think the only real solution at the moment is to manually pass a react query context to trpc, such that you have an isolated query client (haven't tested this, seems like a reasonable idea)\r\n\r\nAlternatively you could also create a wrapper route that serves as the root route to make sure that the query key is not empty\r\n\r\n### Additional information\r\n\r\nIf this is something that would be merged I am willing to give implementing this a shot\r\n\r\n### π¨βπ§βπ¦ Contributing\r\n\r\n- [X] πββοΈ Yes, I'd be down to file a PR implementing this feature!",[3196,3199],{"name":3197,"color":3198},"β
accepted-PRs-welcome","0052cc",{"name":3200,"color":3201},"π° wontfix/$$$$","ffffff",5251,"feat: (customizable) query key prefix","2025-03-20T15:42:09Z","https://github.com/trpc/trpc/issues/5251",0.65743446,{"description":3208,"labels":3209,"number":3211,"owner":3175,"repository":3175,"state":3176,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 14.4.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 62.41 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node\r\n npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm\r\n pnpm: 9.12.2 - ~/.nvm/versions/node/v20.10.0/bin/pnpm\r\n Browsers:\r\n Chrome: 130.0.6723.92\r\n Safari: 17.4.1\r\n npmPackages:\r\n @tanstack/react-query: ^5.59.19 => 5.59.19 \r\n @trpc/client: 11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 \r\n @trpc/react-query: 11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 \r\n react: ^18.3.1 => 18.3.1 \r\n typescript: ^5.6.3 => 5.6.3 \r\n```\n\n### Describe the bug\n\nI have a query which I just want to run in a certain condition (if another query had a non-empty result). I was trying to follow the docs (see https://trpc.io/docs/client/react/useQueries in conjunction with https://tanstack.com/query/v4/docs/framework/react/guides/dependent-queries#usequeries-dependent-query) but I could not get my code snippet to compile.\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-qa2kdy?file=src%2Fpages%2Findex.tsx\n\n### To reproduce\n\nChange the text in the variable `text` in line 10 of the `index.tsx`, and you'll see the error appear. To me the error only appeared after changing the text.\n\n### Additional information\n\nHere's the typescript error I get on the callback:\r\n\r\n```\r\nArgument of type '(t: UseQueriesProcedureRecord\u003C{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, { greeting: QueryProcedure\u003C{ input: { name?: string | null | undefined; }; output: { text: string; }; }>; }>) => [] | [...]' is not assignable to parameter of type '(t: UseQueriesProcedureRecord\u003C{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, { greeting: QueryProcedure\u003C{ input: { name?: string | null | undefined; }; output: { text: string; }; }>; }>) => readonly []'.\r\n Type '[] | [TrpcQueryOptionsForUseQueries\u003C{ text: string; }, { text: string; }, TRPCClientError\u003C{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>>]' is not assignable to type 'readonly []'.\r\n Type '[TrpcQueryOptionsForUseQueries\u003C{ text: string; }, { text: string; }, TRPCClientError\u003C{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>>]' is not assignable to type 'readonly []'.\r\n Source has 1 element(s) but target allows only 0.(2345)\r\n```\n\n### π¨βπ§βπ¦ Contributing\n\n- [ ] πββοΈ Yes, I'd be down to file a PR fixing this bug!",[3210],{"name":3172,"color":3173},6188,"bug: React: Types for callback of `trpc.useQueries` doesn't allow returning an empty array","2025-03-20T15:42:41Z","https://github.com/trpc/trpc/issues/6188",0.6629467,{"description":3217,"labels":3218,"number":3220,"owner":3175,"repository":3175,"state":3176,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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!",[3219],{"name":3172,"color":3173},6953,"bug: useSuspenseQuery does not forward TRPC options to context","2025-09-21T18:55:41Z","https://github.com/trpc/trpc/issues/6953",0.6631618,{"description":3226,"labels":3227,"number":3229,"owner":3175,"repository":3175,"state":3176,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Describe the feature you'd like to request\n\nI wanna set a default global callback in trpc.\r\n\r\nFor example, i can has a default error alert tip if we throw error in request, or we have take mutation show operate success alert tip.\r\n\r\nNow, i have to set those in every where.\r\n\r\nI take a look of source code, its weird:\r\n\r\n- why only get default option with `getMutationDefaults` rather than `getDefaultOptions`?\r\n- why not append default option into `__useMutation` options?\r\n- in `mutationSuccessOverride`, why the `overrides` handler is higher priority than options callback in caller where define as `originalFn`?\r\n\r\nhttps://github.com/trpc/trpc/blob/42e6910cfb9f25ab12f522a3ede01a0078b5bc6d/packages/react-query/src/shared/hooks/createHooksInternal.tsx#L338-L370\n\n### Describe the solution you'd like to see\n\nSet in `trpc.createTRPCReact` \r\n```ts\r\nexport const trpc = createTRPCReact\u003CAppRouter>({\r\n overrides: {\r\n useMutation: {\r\n onSuccess: ()=> console.log('success'),\r\n },\r\n },\r\n});\r\n``` \r\n\r\nor in `new QueryClient` \r\n\r\n```ts\r\nexport const queryClient = new QueryClient({\r\n defaultOptions: {\r\n mutations: {\r\n onSuccess: () => console.log('success'),\r\n onError: () => console.log('error'),\r\n },\r\n },\r\n});\r\n```\n\n### Describe alternate solutions\n\nnone\n\n### Additional information\n\nI want to contribute code to implement this feature, but i cant understand why there logic is it.\r\n\r\nI'm not sure if this is intentional, can you give me some context?\n\n### π¨βπ§βπ¦ Contributing\n\n- [X] πββοΈ Yes, I'd be down to file a PR implementing this feature!",[3228],{"name":3197,"color":3198},4924,"feat: wanna default handle callback for `useMutation` in `react-query`","2025-03-20T15:41:58Z","https://github.com/trpc/trpc/issues/4924",0.6790348,{"description":3235,"labels":3236,"number":3237,"owner":3175,"repository":3238,"state":3176,"title":3239,"updated_at":3240,"url":3241,"score":3242},"Hello,\r\n\r\nI was wondering why the `createOpenApiExpressMiddleware` function returns a handler that's async:\r\n```ts\r\nexport const createOpenApiExpressMiddleware = \u003CTRouter extends OpenApiRouter>(\r\n opts: CreateOpenApiExpressMiddlewareOptions\u003CTRouter>,\r\n) => {\r\n const openApiHttpHandler = createOpenApiNodeHttpHandler(opts);\r\n\r\n return async (req: Request, res: Response) => {\r\n await openApiHttpHandler(req, res);\r\n };\r\n};\r\n```\r\n\r\nThis is meant to be used with Express, but Express does not accept an async handler as of now. This leads to some typescript errors, especially when used with a strict eslint configuration:\r\n```\r\nPromise returned in function argument where a void return was expected.eslint[@typescript-eslint/no-misused-promises](https://typescript-eslint.io/rules/no-misused-promises)\r\n```\r\n\r\nI've been wrapping it with `express-async-handler` and it works just fine, but I was wondering what was the desired behavior or if there's something I'm missing:\r\n```ts\r\nimport asyncHandler from \"express-async-handler\";\r\napp.use(\r\n \"/api\",\r\n asyncHandler(\r\n createOpenApiExpressMiddleware({\r\n router: appRouter,\r\n createContext: createTRPCContext,\r\n })\r\n )\r\n);\r\n```\r\n\r\nMany Thanks",[],367,"trpc-openapi","Why does createOpenApiExpressMiddleware return an async handler?","2023-08-06T03:02:13Z","https://github.com/trpc/trpc-openapi/issues/367",0.67962176,{"description":3244,"labels":3245,"number":3251,"owner":3175,"repository":3175,"state":3252,"title":3253,"updated_at":3254,"url":3255,"score":3256},"When [doing updates optimistically](https://react-query.tanstack.com/guides/optimistic-updates), having a `context` value to roll back failed mutations with is crucial. Unfortunately, the `TContext` type used within React Query isnβt inferred in tRPCβs React Query client, and so the value of `context` will always be `unknown`, e.g. in `onError` handlers.\r\n\r\nProviding a fourth generic type parameter, `TContext`, to the underlying `useQuery` and `useMutation` hooks might help β please see the related code snippet for details: https://github.com/trpc/trpc/blob/39129c54eb9ede1542b4cd2093d85bf371cdfa8e/packages/react/src/createReactQueryHooks.tsx#L188-L223",[3246,3249],{"name":3247,"color":3248},"π good first issue","7057ff",{"name":3250,"color":3201},"wontfix",391,"closed","Context type of queries and mutations isnβt inferred when using React Query","2022-10-05T00:09:26Z","https://github.com/trpc/trpc/issues/391",0.45656067,{"description":3258,"labels":3259,"number":3260,"owner":3175,"repository":3175,"state":3252,"title":3261,"updated_at":3262,"url":3263,"score":3264},"It's common to pass values returned by a query to components as a prop in react, however it seems like it's difficult to get the `typeof` of a query without having to touch `AppRouter['_def']['queries']['queryName']` which looks a bit verbose. \r\n\r\nShould TRPC export an utility type that makes it easier? Maybe something like `typeof inferQuery\u003CAppRouter, 'query.name'>`",[],768,"Utility type to infer query type","2022-10-05T00:09:27Z","https://github.com/trpc/trpc/issues/768",0.6576201,{"description":3266,"labels":3267,"number":3268,"owner":3175,"repository":3175,"state":3252,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Provide environment information\n\nOS: macOS 13.0\r\nCPU: (8) x64 Apple M1\r\nMemory: 16.57 MB / 16.00 GB\r\nShell: 5.5.1 - /usr/local/bin/zsh\r\nBinaries:\r\nNode: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node\r\nYarn: 1.22.19 - ~/.nvm/versions/node/v14.18.3/bin/yarn\r\nnpm: 8.13.1 - ~/.nvm/versions/node/v14.18.3/bin/npm\r\nBrowsers:\r\nBrave Browser: 87.1.18.75\r\nChrome: 107.0.5304.110\r\nFirefox: 105.0.3\r\nFirefox Developer Edition: 76.0\r\nSafari Technology Preview: 16.4\r\n\n\n### Describe the bug\n\nI don't really know how this type checking really works but if somehow the client repo has different trpc version than the server ones, if I start the client side (e.g. nuxt) it will throw an error.\r\n\r\nError stacktrace\r\n```\r\nERROR ERROR in client.ts:5:45 05:06:06\r\nTS2344: Type 'Router\u003C{ _config: RootConfig\u003C{ ctx: any; meta: {}; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; router: true; ... 5 more ...; isDev: boolean; }> & { ...; }' does not satisfy the constraint 'Router\u003CAnyRouterDef\u003CAnyRootConfig, any>>'.\r\nThe types returned by 'createCaller(...)' are incompatible between these types.\r\nType '{ query: inferHandlerFn\u003C{}>; mutation: inferHandlerFn\u003C{}>; subscription: inferHandlerFn\u003C{}>; } & DecoratedProcedureRecord\u003C{ exportReport: BuildProcedure\u003C\"query\", { ...; }, { ...; }>; }>' is not assignable to type '{ query: inferHandlerFn; mutation: inferHandlerFn; subscription: inferHandlerFn; } & DecoratedProcedureRecord'.\r\nType '{ query: inferHandlerFn\u003C{}>; mutation: inferHandlerFn\u003C{}>; subscription: inferHandlerFn\u003C{}>; } & DecoratedProcedureRecord\u003C{ exportReport: BuildProcedure\u003C\"query\", { ...; }, { ...; }>; }>' is not assignable to type '{ query: inferHandlerFn; mutation: inferHandlerFn; subscription: inferHandlerFn; }'.\r\nTypes of property 'query' are incompatible.\r\nType 'inferHandlerFn\u003C{}>' is not assignable to type 'inferHandlerFn'.\r\nTypes of parameters 'path' and 'path' are incompatible.\r\nType 'TPath' is not assignable to type 'never'.\r\nType 'string' is not assignable to type 'never'.\r\n```\r\n\r\nIf I understand it correctly, type checking in this case is probably inferred from the compilation time, how is the version of another repo that host the server app router code has to do with this and invalidate the inference? I'm really confused.\n\n### Link to reproduction\n\n123\n\n### To reproduce\n\nI have two repos, frontend-code and backend-code\r\n\r\nfrontend-code has yarn.lock `trpc/client 10.0.0-rc.8`, `trpc/client 10.0.0-rc.8`\r\nbackend-code has yarn.lock `trpc/client 10.0.0-rc.7`\r\n\r\nThe code that throw an error from (this runs in a nuxt project as a plugin)\r\n```\r\nimport Vue from 'vue'\r\nimport { createTRPCProxyClient, httpBatchLink } from '@trpc/client';\r\nimport type { AppRouter } from '../../../backend-code/server/_app';\r\n\r\nexport const client = createTRPCProxyClient\u003CAppRouter>({\r\n links: [\r\n httpBatchLink({\r\n url: process.env.TRPC_URL || '',\r\n fetch(url, options) {\r\n return fetch(url, {\r\n ...options,\r\n credentials: 'omit', // cors\r\n });\r\n },\r\n }),\r\n ],\r\n});\r\n```\r\n\r\nCode in ../../../backend-code/server/_app\r\n```\r\nimport { mergeRouters } from './trpc';\r\nimport { exportRouter } from './routers/report' // (a typical trpc router)\r\nΒ \r\nexport const appRouter = exportRouter;\r\nΒ \r\n// Export **type** of a router\r\nexport type AppRouter = typeof appRouter;\r\n```\r\n\r\n\r\nError stacktrace\r\n```\r\nERROR ERROR in client.ts:5:45 05:06:06\r\nTS2344: Type 'Router\u003C{ _config: RootConfig\u003C{ ctx: any; meta: {}; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; router: true; ... 5 more ...; isDev: boolean; }> & { ...; }' does not satisfy the constraint 'Router\u003CAnyRouterDef\u003CAnyRootConfig, any>>'.\r\nThe types returned by 'createCaller(...)' are incompatible between these types.\r\nType '{ query: inferHandlerFn\u003C{}>; mutation: inferHandlerFn\u003C{}>; subscription: inferHandlerFn\u003C{}>; } & DecoratedProcedureRecord\u003C{ exportReport: BuildProcedure\u003C\"query\", { ...; }, { ...; }>; }>' is not assignable to type '{ query: inferHandlerFn; mutation: inferHandlerFn; subscription: inferHandlerFn; } & DecoratedProcedureRecord'.\r\nType '{ query: inferHandlerFn\u003C{}>; mutation: inferHandlerFn\u003C{}>; subscription: inferHandlerFn\u003C{}>; } & DecoratedProcedureRecord\u003C{ exportReport: BuildProcedure\u003C\"query\", { ...; }, { ...; }>; }>' is not assignable to type '{ query: inferHandlerFn; mutation: inferHandlerFn; subscription: inferHandlerFn; }'.\r\nTypes of property 'query' are incompatible.\r\nType 'inferHandlerFn\u003C{}>' is not assignable to type 'inferHandlerFn'.\r\nTypes of parameters 'path' and 'path' are incompatible.\r\nType 'TPath' is not assignable to type 'never'.\r\nType 'string' is not assignable to type 'never'.\r\n```\r\n\r\nIf I understand it correctly, type checking in this case is probably inferred from the compilation time, how is the version of another repo that host the server app router code has to do with this and invalidate the inference? I'm really confused.\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!",[],3206,"bug: if trpc package version is different between server and client code it will throw an error","2022-11-20T14:06:29Z","https://github.com/trpc/trpc/issues/3206",0.6578907,["Reactive",3274],{},["Set"],["ShallowReactive",3277],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBFNhX9L2vCO5rQgWuStoITphScWqUSE_zl9rmQEOazI":-1},"/trpc/trpc-openapi/391"]