;\r\n})\r\n\r\nexport default trpc.withTRPC(MyApp);\r\n```\r\n\r\n#### After\r\n\r\n> Not thrilled about exactly this API-design, but gets the point across that `withTRPC()` can be tree shaken, feel free to do other suggestions\r\n\r\n```ts\r\n// _app.tsx\r\nimport { AppType } from 'next/dist/shared/lib/utils';\r\nimport { trpc } from '~/utils/trpc';\r\nimport { createTRPCNextWithTRPC } from '@trpc/next';\r\n\r\nconst MyApp: AppType = (({ Component, pageProps }) => {\r\n return \u003CComponent {...pageProps} />;\r\n})\r\n\r\nexport default createWithTRPC(trpc)(MyApp);\r\n```\r\n",[3101],{"name":3102,"color":3103},"RFC","78B062",2650,"Break out `withTRPC` from `createTRPCNext`?","2022-11-04T00:06:57Z","https://github.com/trpc/trpc/issues/2650",0.68309784,{"description":3110,"labels":3111,"number":3115,"owner":3030,"repository":3030,"state":3066,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Describe the feature you'd like to request\n\nAs per [this discussion](https://github.com/trpc/trpc/discussions/4010), I found it confusing to integrate tRPC into NextJS SSG, when not adhering to the strict Prisma/Next/tRPC paradigm.\r\n\r\nUltimately, I would like it to be more straightforward to integrate React Query.\r\n\r\nCurrently, the way tRPC integrates with React Query is fairly opaque, and having both `@trpc/react-query` and `@trpc/next` packages adds more confusion than benefit IMO.\r\n\r\nConsidering packages like `react-query` do a good job of handling the fetching, caching and SSG - and have all the up-to-date docs around it - I think `tRPC` would do well to integrate with such tools in a less opinionated manner, plugging into these existing tools, instead of encapsulating, limiting their behaviour and then having to document and maintain what is effectively a third party interface.\n\n### Describe the solution you'd like to see\n\nBoth the `/react-query` and `/next` packages are relatively small. Given the recommendation against tree-resolving the queries, [here](https://trpc.io/docs/ssr), and the general consensus among client-side fetching libraries like Apollo and React Query away from such approached, I think the `/next` package can actually be deprecated. It's not clear that the NextJS integration (for fetching) is required, and adds more overhead for documentation and more opportunity for confusion.\r\n\r\nSecondly, I think the `/react-query` package could integrate with `react-query` in a more lightweight manner. Instead of in-housing the creation of `QueryClient` and `QueryProvider`, instead it should integrate within the `/react-query` approach. In short, the `createTRPCReact` should return a bunch of type-safe helpers proxying the `some.query.here` to an object of pre-defined `useQuery, useInifiniteQuery` etc. wrappers. I don't think any fundamentally new functionality or different API pattern (to react query) should be added here.\r\n\r\n## What might this look like?\r\n\r\nKeep configuration of React Query entirely separate and up to the user. This maximises flexibility, transparency and minimizes `tRPC` maintenance + documentation.\r\n\r\n```tsx\r\n// _app.tsx\r\nconst myQueryClient = new QueryClient(myOptions)\r\n\r\nreturn \u003CQueryProvider queryClient={myQueryClient}>\r\n \u003CHydrate state={myDehydratedState}>\r\n \u003CComponent {...} />\r\n \u003C/Hydrate>\r\n\u003C/QueryProvider>\r\n```\r\n\r\nAnd then `createTRPCReact` can just return a comprehensive object of helper queries and exposure of helpful internal functions like so:\r\n\r\n```tsx\r\ntype AppRouter = { myProcedure: {...} }\r\n\r\nconst trpc = createTRRCReact\u003CAppRouter>(trpcRelatedConfigHere)\r\n\r\n// Using a procedure's helpers\r\ntrpc.myProcedure.useQuery(...)\r\ntrpc.myProcedure.useInfiniteQuery(...)\r\ntrpc.myProcedure.key(...) // \u003C- useful for react-query idiomatic SSG\r\ntrpc.myProcedure.fetcher(...) // \u003C- ^^\r\n\r\n// Using TRPC helpers\r\n```tsx\r\ntrpc.dehydrate() // \u003C- Light wrapper over react query dehydrate, including appropriate serialisation/any necessary mods\r\n```\n\n### Describe alternate solutions\n\nCurrently it's not clear that I can actually perform half the React Query things that I used to with `tRPC`s wrappers.\r\n\r\nIn the case of SSG, perhaps it's possible to create a vanilla client and react client, use `getQueryKey` and the vanilla client to re-enter the idiomatic react query approach a la\r\n\r\n```tsx\r\nqueryClient.prefetch(\r\n getQueryKey(...), // \u003C- Key\r\n () =>. trpc.my.procedure.query(...) // \u003C- fetcher\r\n)\r\nreturn { props: { trpcState: SuperJSON.serialize(dehydrate(queryClient)) } }\r\n```\r\n\r\nHowever I haven't been able to get this working just yet.\n\n### Additional information\n\nI appreciate this suggestion is somewhat radical, and don't mean to come across as denigrating the work done here. I just think for the sanity of both the `tRPC` maintainers and users, integrating with already complicated tools like React Query should be done with minimal modification, lest you're on the hook for much more documentation, maintenance and functionality parity.\r\n\r\nWith all of this said, I'm more than happy to have a go at rethinking this. Of course, since it's a bold change, I wouldn't expect immediate acceptance. In any case, I'll be prototyping a solution like the above in my own application in the meantime, as SSG is a blocker for my migration to `tRPC`, so I can share or PR this solution when appropriate 👍.\r\n\r\nOutside of this hurdle, I have been really enjoying using `tRPC`. In fact it inspired part of the API for another recent [project of mine](https://github.com/sinclairnick/brail).\n\n### 👨👧👦 Contributing\n\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!\n\n\u003Csub>[TRP-18](https://linear.app/trpc/issue/TRP-18/feat-make-react-query-integration-less-opaque)\u003C/sub>",[3112],{"name":3113,"color":3114},"@trpc/react-query","375E6E",4012,"feat: Make React-Query integration less opaque","2025-03-20T15:41:35Z","https://github.com/trpc/trpc/issues/4012",0.68450904,["Reactive",3121],{},["Set"],["ShallowReactive",3124],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-2nRKvxzcBNaBz3MWv4L-z8gsubMIoCYAgxpVF4Wc7k":-1},"/trpc/trpc/551"]