\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>",[3083],{"name":3084,"color":3085},"@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.67545706,{"description":3092,"labels":3093,"number":3095,"owner":3022,"repository":3022,"state":3045,"title":3096,"updated_at":3097,"url":3098,"score":3099},"Trpc is missing the ability to manually trigger a query refetch.\r\n\r\nFrom queryClient.refetchQueries: https://react-query.tanstack.com/reference/QueryClient#queryclientrefetchqueries\r\n\r\n```ts\r\n // refetch all queries:\r\n await queryClient.refetchQueries()\r\n \r\n // refetch all stale queries:\r\n await queryClient.refetchQueries({ stale: true })\r\n \r\n // refetch all active queries partially matching a query key:\r\n await queryClient.refetchQueries(['posts'], { active: true })\r\n \r\n // refetch all active queries exactly matching a query key:\r\n await queryClient.refetchQueries(['posts', 1], { active: true, exact: true })\r\n```",[3094],{"name":3042,"color":3043},1202,"queryClient.refetchQueries missing","2022-10-04T18:07:52Z","https://github.com/trpc/trpc/issues/1202",0.67928916,{"description":3101,"labels":3102,"number":3106,"owner":3022,"repository":3022,"state":3045,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Provide environment information\r\n\r\n```\r\nSystem:\r\n OS: macOS 12.5.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 162.39 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node\r\n Yarn: 1.22.19 - ~/Documents/dev/node_modules/.bin/yarn\r\n npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm\r\n Browsers:\r\n Brave Browser: 105.1.43.89\r\n Chrome: 105.0.5195.125\r\n Edge: 106.0.1370.37\r\n Firefox: 105.0.1\r\n Safari: 15.6.1\r\n npmPackages:\r\n @tanstack/react-query: ^4.8.0 => 4.10.3\r\n @trpc/client: 10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15\r\n @trpc/next: 10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15\r\n @trpc/react: 10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15\r\n @trpc/server: 10.0.0-proxy-beta.15 => 10.0.0-proxy-beta.15\r\n next: 12.3.1 => 12.3.1\r\n react: 18.2.0 => 18.2.0\r\n typescript: 4.7.4 => 4.7.4\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen optimistically updating an infinite query using `.setInfiniteData(updater, input)`, The query data is optimistically updated to `input`, instead of the result of the updater.\r\n\r\n### Link to reproduction\r\n\r\nhttps://github.com/c-ehrlich/setinfinitedata\r\n\r\n### To reproduce\r\n\r\nFull code sample in the above repo, but here is the key part:\r\n```ts\r\nconst queryClient = trpc.useContext();\r\n\r\nconst { data: posts } = trpc.example.getPaginated.useInfiniteQuery({\r\n foo: \"bar\",\r\n});\r\n\r\nconst create = trpc.example.create.useMutation({\r\n onMutate: () => {\r\n queryClient.example.getPaginated.cancel();\r\n\r\n queryClient.example.getPaginated.setInfiniteData((data) => data, {\r\n foo: \"bar\",\r\n });\r\n },\r\n onSettled: () => queryClient.example.getPaginated.invalidate(),\r\n});\r\n\r\nfunction handleCreate() {\r\n create.mutate({ id: String(Math.random()) });\r\n}\r\n```\r\nTypeScript suggests that everything is in the right place\r\n\r\n### Additional information\r\n\r\nhttps://user-images.githubusercontent.com/8353666/194729466-9d29d187-54c3-4b00-b283-ae0861d07e1c.mov\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[3103],{"name":3104,"color":3105},"🐛 bug","d73a4a",2942,"bug: `setInfiniteData` sets optimistic update to `input`","2022-10-23T12:02:22Z","https://github.com/trpc/trpc/issues/2942",0.6830286,{"description":3112,"labels":3113,"number":3114,"owner":3022,"repository":3022,"state":3045,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Describe the feature you'd like to request\r\n\r\nDeprecate `.getQueryKey` from the magical chain. It's noisy and an edge-case where you need to use it.\r\n\r\n\u003Cimg width=\"333\" alt=\"CleanShot 2023-01-11 at 23 13 40@2x\" src=\"https://user-images.githubusercontent.com/459267/211929258-0002f973-0757-4322-add6-c20e5d92a851.png\">\r\n\r\n\r\n### Describe the solution you'd like to see\r\n\r\nIntroduce another way of accessing it like. Example:\r\n\r\nIdea:\r\n\r\n\r\n```ts\r\nimport { trpc } from '~/utils/trpc';\r\nimport { getQueryKey } from '@trpc/react-query';\r\n\r\nfunction MyComponent() {\r\n const utils = trpc.useContext();\r\n\r\n const queryKey = utils.getQueryKey(t => t.post.byId('x'))\r\n}\r\n```\r\n\r\nOnly on the root?\r\n\r\n\r\n```ts\r\nimport { trpc } from '~/utils/trpc';\r\n\r\nfunction MyComponent() {\r\n const queryKey = trpc.getQueryKey(t => t.post.byId('x'))\r\n}\r\n```\r\n\r\n### Describe alternate solutions\r\n\r\nAbove\r\n\r\n### Additional information\r\n\r\n- Deprecate in v10\r\n- Delete in v11\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[],3605,"feat: move `trpc.something.getQueryKey` to a standalone function","2023-02-18T00:05:22Z","https://github.com/trpc/trpc/issues/3605",0.6844231,["Reactive",3120],{},["Set"],["ShallowReactive",3123],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_DEUh3E0fdCSj-5r0K4Lkux9c-nZqXjcS-OLQbQhji4":-1},"/trpc/trpc-openapi/367"]