_e.g._ `?input=${JSON.stringify(encodeURIComponent(input))` |\r\n| `POST` | `.mutation()` | Input as post body. | \r\n\r\n## Considerations with OpenAPI\r\n\r\n- Resources are usually `/{resource}/{id}?param1=x¶m2=y`-style - tRPC is [currently] with `{resource}?input=JSON.stringify(encodeURIComponent(input))`-style\r\n- JSON-RPC based response shape might not be the ideal response shape for OpenAPI\r\n- An output schema usually have a `$ref`-schema which would be possible to do automatically / first feature people would request is to make different paths request the same input type\r\n- Actually using zod or any other validation on a resolver's `output` would slow down API outputs.\r\n\r\n## Related\r\n\r\nhttps://github.com/trpc/trpc/discussions/271\r\n",[2977,2978],{"name":2964,"color":2965},{"name":2900,"color":2901},755,"[RFC] Using tRPC for public-facing APIs (OpenAPI/Swagger/etc)","2022-06-19T00:48:45Z","https://github.com/trpc/trpc/issues/755",0.70458513,{"description":2985,"labels":2986,"number":2987,"owner":2869,"repository":2869,"state":2891,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### 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.70860505,["Reactive",2993],{},["Set"],["ShallowReactive",2996],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fI3kz3w0a33BbITFne5ZmWFzjRXO-oj0Uq4-xV-o974Y":-1},"/trpc/trpc-openapi/173"]