\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!",[3202],{"name":3203,"color":3204},"🐛 bug: unconfirmed","e99695",6924,"bug: wrong types in the new trpc react-query client","2025-09-03T09:28:51Z","https://github.com/trpc/trpc/issues/6924",0.6934573,{"description":3211,"labels":3212,"number":3216,"owner":3172,"repository":3172,"state":3217,"title":3218,"updated_at":3219,"url":3220,"score":3221},"In order to [execute updates optimistically with React Query](https://react-query.tanstack.com/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo), data has to be read from the `queryClient`, as seen in the linked example:\r\n\r\n```ts\r\n// Snapshot the previous value\r\nconst previousTodos = queryClient.getQueryData('todos')\r\n```\r\n\r\nUnfortunately, the situation isn’t so easy with tRPC, as it doesn’t provide a `getQueryData` method, but only `setQueryData`. After digging into the source code, I figured out an escape hatch to perform query data reads with – but it [relies upon](https://github.com/trpc/trpc/blob/b0ad15ef95b8d7d0b7ac8747df54d5aa08154550/packages/react/src/createReactQueryHooks.tsx#L163-L176) the [`CACHE_KEY_QUERY` internal constant](https://github.com/trpc/trpc/blob/b0ad15ef95b8d7d0b7ac8747df54d5aa08154550/packages/react/src/internals/constants.tsx#L3). The issue is showcased below without the additional clutter of handling optimistic updates via `onMutate` and `onError`:\r\n\r\n```ts\r\nexport function useCreatePage() {\r\n const { setQueryData, queryClient } = trpc.useContext();\r\n\r\n return trpc.useMutation(\"Page.create\", {\r\n onSuccess: (data) => {\r\n setQueryData([\"Page.find\", data.id], data);\r\n\r\n const prevPagesBySiteId =\r\n queryClient.getQueryData\u003CPage[]>([\r\n \"Page.findBySiteId\",\r\n data.siteId,\r\n \"TRPC_QUERY\", // CACHE_KEY_QUERY\r\n ]) ?? [];\r\n setQueryData(\r\n [\"Page.findAllBySiteId\", data.siteId],\r\n [...prevPagesBySiteId, data],\r\n );\r\n },\r\n });\r\n}\r\n```\r\n\r\nThe code above should be replaceable with:\r\n\r\n```ts\r\nexport function useCreatePage() {\r\n const { getQueryData, setQueryData } = trpc.useContext();\r\n\r\n return trpc.useMutation(\"Page.create\", {\r\n onSuccess: (data) => {\r\n setQueryData([\"Page.find\", data.id], data);\r\n\r\n const prevPagesBySiteId =\r\n getQueryData([\"Page.findBySiteId\", data.siteId]) ?? [];\r\n setQueryData(\r\n [\"Page.findAllBySiteId\", data.siteId],\r\n [...prevPagesBySiteId, data],\r\n );\r\n },\r\n });\r\n}\r\n```",[3213],{"name":3214,"color":3215},"👉 good first issue","7057ff",367,"closed","Add `trpc.useContext().getQueryData()`","2022-10-05T00:09:48Z","https://github.com/trpc/trpc/issues/367",0.45623872,{"description":3223,"labels":3224,"number":3229,"owner":3172,"repository":3172,"state":3217,"title":3230,"updated_at":3231,"url":3232,"score":3233},"When updating values in the query cache which rely upon the old value, [an updater callback](https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata) comes handy, e.g.:\r\n\r\n```ts\r\nsetQueryData(\r\n [\"Page.findAllBySiteId\", data.siteId],\r\n (prev) => [...prev, data],\r\n);\r\n```\r\n\r\nInstead of:\r\n\r\n```ts\r\nconst prevPagesBySiteId =\r\n getQueryData([\"Page.findBySiteId\", data.siteId]) ?? [];\r\nsetQueryData(\r\n [\"Page.findAllBySiteId\", data.siteId],\r\n [...prevPagesBySiteId, data],\r\n);\r\n```\r\n\r\nThis overload should be made available through `trpc.useContext().setQueryData`.",[3225,3226],{"name":3214,"color":3215},{"name":3227,"color":3228},"wontfix","ffffff",368,"Add `trpc.useContext().setQueryData()` callback","2022-10-05T00:09:42Z","https://github.com/trpc/trpc/issues/368",0.59624445,{"description":3235,"labels":3236,"number":3237,"owner":3172,"repository":3172,"state":3217,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### 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.6580992,{"description":3243,"labels":3244,"number":3247,"owner":3172,"repository":3172,"state":3217,"title":3248,"updated_at":3249,"url":3250,"score":3251},"Thank you for bringing this project to life – it has been a joy to use from the very start!\r\n\r\nWhile experimenting with [SSG helpers](https://trpc.io/docs/nextjs#4-start-consuming-your-data-1), I realized that the only React Query methods available are `fetchQuery` and `prefetchQuery`. The latter could be [used with a custom initializer method](https://react-query.tanstack.com/guides/prefetching), but unfortunately, tRPC doesn’t support that approach at this time.\r\n\r\nWhen prefetching more queries during SSR/SSG, executing DB queries as a single transaction to obtain all the data required could outperform parallel queries ran via `Promise.all([ssg.fetchData(…), ssg.fetchData(…), …])`.\r\n\r\nFor instance, [Prisma’s `$transaction` API](https://www.prisma.io/docs/guides/performance-and-optimization/prisma-client-transactions-guide) makes it possible to execute the related queries at once, without having to wait for hops between the DB and the app server multiple times. However, the results have to be [primed manually into the `QueryClient`](https://react-query.tanstack.com/guides/prefetching#manually-priming-a-query) returned by `createSSGHelpers`. Exposing `setQueryData` could bring great performance improvements for end-users.",[3245,3246],{"name":3214,"color":3215},{"name":3227,"color":3228},365,"Add `createSSGHelpers().setQueryData()`","2022-10-05T00:09:41Z","https://github.com/trpc/trpc/issues/365",0.6602161,{"description":3253,"labels":3254,"number":3258,"owner":3172,"repository":3172,"state":3217,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### 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>",[3255],{"name":3256,"color":3257},"@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":3264,"labels":3265,"number":3267,"owner":3172,"repository":3172,"state":3217,"title":3268,"updated_at":3269,"url":3270,"score":3271},"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```",[3266],{"name":3214,"color":3215},1202,"queryClient.refetchQueries missing","2022-10-04T18:07:52Z","https://github.com/trpc/trpc/issues/1202",0.67928916,["Reactive",3273],{},["Set"],["ShallowReactive",3276],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_DEUh3E0fdCSj-5r0K4Lkux9c-nZqXjcS-OLQbQhji4":-1},"/trpc/trpc-openapi/367"]