\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!",[2918],{"name":2919,"color":2920},"🐛 bug: unconfirmed","e99695",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.6370084,{"description":2927,"labels":2928,"number":2880,"owner":2871,"repository":2871,"state":2910,"title":2934,"updated_at":2935,"url":2936,"score":2885},"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",[2929,2932],{"name":2930,"color":2931},"👉 good first issue","7057ff",{"name":2933,"color":2892},"wontfix","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",{"description":2938,"labels":2939,"number":2940,"owner":2871,"repository":2871,"state":2910,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Describe the feature you'd like to request\r\n\r\nI'm using trpc inside nextjs app with external trpc server that uses `nestjs-trpc`. I want to have acces for both `query` and `useQuery` since `query` will be useful in react server components for fetching data on server and react query hooks will be useful for client components fe. infinite query pagination.\r\n\r\n### Describe the solution you'd like to see\r\n\r\nI would like to extend an existing trpc client with react query.\r\n\r\nExample:\r\n\r\n`trpc.ts`\r\n```ts\r\nimport { createTRPCClient, httpBatchLink } from '@trpc/client'\r\n\r\nimport type { AppRouter } from '../../api'\r\n\r\nimport { env } from './env'\r\n\r\nexport const trpc = createTRPCClient\u003CAppRouter>({\r\n links: [\r\n httpBatchLink({\r\n url: `${env.API_URL}/trpc`,\r\n }),\r\n ],\r\n})\r\n```\r\n\r\n`layout.tsx`\r\n```ts\r\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\r\nimport { httpBatchLink } from '@trpc/client';\r\nimport React, { useState } from 'react';\r\nimport { trpc } from './utils/trpc';\r\nexport function App() {\r\n const [queryClient] = useState(() => new QueryClient());\r\n const [trpcClient] = useState(() =>\r\n trpc.createReactQueryClient(),\r\n );\r\n return (\r\n \u003Ctrpc.Provider client={trpcClient} queryClient={queryClient}>\r\n \u003CQueryClientProvider client={queryClient}>\r\n {/* Your app here */}\r\n \u003C/QueryClientProvider>\r\n \u003C/trpc.Provider>\r\n );\r\n}\r\n```\r\n\r\n### Describe alternate solutions\r\n\r\nMaybe add `.extend` and use it like this\r\n\r\n`trpc.ts`\r\n```ts\r\nexport const trpc = createTRPCClient\u003CAppRouter>({\r\n links: [\r\n httpBatchLink({\r\n url: `${env.API_URL}/trpc`,\r\n }),\r\n ],\r\n}).extend(createTRPCReact\u003CAppRouter>())\r\n```\r\n\r\nI just need any way to extend vanilla trpc client with react-query hooks.\r\n\r\n### Additional information\r\n\r\nhttps://discord.com/channels/867764511159091230/1290004736006946816\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],6069,"feat: Using `@trpc/client` and `@trpc/react-query` simultaneously ","2025-03-20T15:42:35Z","https://github.com/trpc/trpc/issues/6069",0.64857066,{"description":2946,"labels":2947,"number":2949,"owner":2871,"repository":2871,"state":2910,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Describe the feature you'd like to request\r\n\r\na feature where you define Query and Mutation in the same procedure path\r\n\r\nthis might benefit reducing the paths you'll have to create E.g. profile.view, profile.update\r\n\r\n```ts\r\nconst appRouter = server.router({\r\n profile: server.router({\r\n view: ...,\r\n update: ...\r\n })\r\n})\r\n```\r\n\r\n### Describe the solution you'd like to see\r\n\r\n```ts \r\n// server\r\nconst profileRouter = server.procedure\r\n .mutation(z.object({ ... }), async ({ ctx, input }) => {\r\n // update profile\r\n })\r\n .query(z.object({ ... }), async ({ ctx, input }) => {\r\n // find profile\r\n })\r\n\r\n// client\r\nconst query = trpc.profile.useQuery({...}, {...})\r\nconst mutation = trpc.profile.useMutation({...})\r\n```\r\n\r\n### Describe alternate solutions\r\n\r\n```ts\r\nconst appRouter = server.router({\r\n profile: server.procedure\r\n .mutation({\r\n meta: {}, // idk about this\r\n input: z.object({ ... }),\r\n resolve: async ({ ctx, input }) => {\r\n // update profile\r\n }\r\n })\r\n .query({\r\n meta: {}, // idk about this\r\n input: z.object({ ... }),\r\n resolve: async ({ ctx, input }) => {\r\n // find profile\r\n }\r\n })\r\n})\r\n ```\r\n\r\n### Additional information\r\n\r\nI don't know if the implementation behind this or if this doesn't follow the standards of RPCs or if this is possible without changing many things.\r\njust an Idea I thought I could share.\r\n\r\nmaybe v11 🤷♂️\r\n\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[2948],{"name":2933,"color":2892},3319,"feat: Query and Mutation at the same level","2022-12-15T18:01:55Z","https://github.com/trpc/trpc/issues/3319",0.653603,{"description":2955,"labels":2956,"number":2957,"owner":2871,"repository":2871,"state":2910,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Describe the feature you'd like to request\n\nOver the years of using GraphQL we always found that using query and mutation was pointless.\r\nWe just set all our quires to mutation.\r\n\r\nWe're using tRPC with the express plugin for a Flutter project, believe it or not is great tRPC even without the type completion is the best choice for any project; the tRPC playground gives great documentation.\r\n\r\nOne massive problem we have though is GET and POST requests from the mutation and query have different formats to get data.\r\n\r\nSo we set everything to POST with mutation and use body.\r\n\r\nPerhaps removing query, or just naming everything with query is better?\r\n\r\nOr maybe I'm wrong and you want to maintain GET for server logs? If that matters.\n\n### Describe the solution you'd like to see\n\n^^\n\n### Desribe alternate solutions\n\n^^\n\n### Additional information\n\n_No response_\n\n### 👨👧👦 Contributing\n\n- [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],2653,"[idea] make distinction between queries & mutations optional","2022-09-09T11:01:54Z","https://github.com/trpc/trpc/issues/2653",0.6574873,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZpHu_e9wViEptMUmv3XwXc2jTDwfDLsbHEPXUTi0nVA":-1},"/trpc/v10-playground/27"]