@trpc/react-query 11.0.0-rc.401 → 11.0.0-rc.403

package/dist/bundle-analysis.json

@@ -1,7 +1,7 @@
 {
-  "bundleSize": 29431,
-  "bundleOrigSize": 63440,
-  "bundleReduction": 53.61,
+  "bundleSize": 32270,
+  "bundleOrigSize": 68448,
+  "bundleReduction": 52.85,
   "modules": [
     {
       "id": "/src/shared/hooks/createHooksInternal.tsx",
@@ -14,7 +14,7 @@
       "dependents": [
         "/src/createTRPCReact.tsx"
       ],
-      "percent": 46.7,
+      "percent": 42.59,
       "reduction": 12.84
     },
     {
@@ -29,7 +29,7 @@
         "/src/createTRPCQueryUtils.tsx",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 12.85,
+      "percent": 11.72,
       "reduction": 6.34
     },
     {
@@ -43,7 +43,7 @@
       "dependents": [
         "/src/server/index.ts"
       ],
-      "percent": 12.48,
+      "percent": 11.38,
       "reduction": 50.38
     },
     {
@@ -59,9 +59,21 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 9.75,
+      "percent": 8.89,
       "reduction": 74.38
     },
+    {
+      "id": "/src/rsc.tsx",
+      "size": 2839,
+      "origSize": 5008,
+      "renderedExports": [
+        "createHydrationHelpers"
+      ],
+      "removedExports": [],
+      "dependents": [],
+      "percent": 8.8,
+      "reduction": 43.31
+    },
     {
       "id": "/src/internals/getQueryKey.ts",
       "size": 1999,
@@ -73,12 +85,13 @@
       "removedExports": [],
       "dependents": [
         "/src/index.ts",
+        "/src/rsc.tsx",
         "/src/server/ssgProxy.ts",
         "/src/shared/proxy/utilsProxy.ts",
         "/src/shared/proxy/useQueriesProxy.ts",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 6.79,
+      "percent": 6.19,
       "reduction": 42.49
     },
     {
@@ -93,7 +106,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 2.89,
+      "percent": 2.63,
       "reduction": 89.28
     },
     {
@@ -107,7 +120,7 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 2.74,
+      "percent": 2.5,
       "reduction": 23.16
     },
     {
@@ -122,7 +135,7 @@
         "/src/shared/index.ts",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 1.93,
+      "percent": 1.76,
       "reduction": 82.03
     },
     {
@@ -138,7 +151,7 @@
         "/src/shared/hooks/createHooksInternal.tsx",
         "/src/utils/createUtilityFunctions.ts"
       ],
-      "percent": 1.61,
+      "percent": 1.47,
       "reduction": 17.31
     },
     {
@@ -152,7 +165,7 @@
       "dependents": [
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 0.75,
+      "percent": 0.69,
       "reduction": 36.21
     },
     {
@@ -166,7 +179,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 0.55,
+      "percent": 0.5,
       "reduction": 66.6
     },
     {
@@ -184,7 +197,7 @@
         "/src/shared/proxy/utilsProxy.ts",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 0.52,
+      "percent": 0.48,
       "reduction": 97.59
     },
     {
@@ -198,7 +211,7 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 0.44,
+      "percent": 0.4,
       "reduction": 74.9
     },
     {
@@ -236,5 +249,5 @@
       "reduction": 100
     }
   ],
-  "moduleCount": 16
+  "moduleCount": 17
 }

package/dist/rsc.d.ts

@@ -0,0 +1,64 @@
+import { type QueryClient } from '@tanstack/react-query';
+import type { TRPCClientError } from '@trpc/client';
+import type { inferTransformedProcedureOutput } from '@trpc/server';
+import { type AnyRouter, type inferProcedureInput, type RouterRecord } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyProcedure, AnyRootTypes, inferProcedureOutput, inferRouterRootTypes, RouterCaller, TypeError } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import type { TRPCFetchInfiniteQueryOptions, TRPCFetchQueryOptions } from './shared';
+type DecorateProcedure<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = {
+    (input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+    prefetch: (input: inferProcedureInput<TProcedure>, opts?: TRPCFetchQueryOptions<inferTransformedProcedureOutput<TRoot, TProcedure>, TRPCClientError<TRoot>>) => Promise<void>;
+    prefetchInfinite: (input: inferProcedureInput<TProcedure>, opts?: TRPCFetchInfiniteQueryOptions<inferProcedureInput<TProcedure>, inferTransformedProcedureOutput<TRoot, TProcedure>, TRPCClientError<TRoot>>) => Promise<void>;
+};
+type DecorateRouterRecord<TRoot extends AnyRootTypes, TRecord extends RouterRecord> = {
+    [TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure ? DecorateProcedure<TRoot, TRecord[TKey]> : TRecord[TKey] extends RouterRecord ? DecorateRouterRecord<TRoot, TRecord[TKey]> : never;
+};
+type Caller<TRouter extends AnyRouter> = ReturnType<RouterCaller<inferRouterRootTypes<TRouter>, TRouter['_def']['record']>>;
+/**
+ * @note This requires `@tanstack/react-query@^5.45.0`
+ */
+export declare function createHydrationHelpers<TRouter extends AnyRouter>(caller: AnyRouter extends TRouter ? TypeError<'Generic parameter missing in `createHydrationHelpers<HERE>`'> : Caller<TRouter>, getQueryClient: () => QueryClient): {
+    /***
+     * Wrapped caller with prefetch helpers
+     * Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
+     * or using prefetch helpers to put the promise into the QueryClient cache
+     * @example
+     * ```ts
+     * const data = await trpc.post.get("postId");
+     *
+     * // or
+     * void trpc.post.get.prefetch("postId");
+     * ```
+     */
+    trpc: DecorateRouterRecord<inferRouterRootTypes<TRouter>, TRouter["_def"]["record"]>;
+    /**
+     * HoC to hydrate the query client for a client component
+     * to pick up the prefetched promise and skip an initial
+     * client-side fetch.
+     * @example
+     * ```tsx
+     * // MyRSC.tsx
+     * const MyRSC = ({ params }) => {
+     *   void trpc.post.get.prefetch(params.postId);
+     *
+     *   return (
+     *     <HydrateClient>
+     *       <MyCC postId={params.postId} />
+     *     </HydrateClient>
+     *    );
+     * };
+     *
+     * // MyCC.tsx
+     * "use client"
+     * const MyCC = ({ postId }) => {
+     *   const { data: post } = trpc.post.get.useQuery(postId);
+     *   return <div>{post.title}</div>;
+     * };
+     * ```
+     */
+    HydrateClient: (props: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=rsc.d.ts.map

package/dist/rsc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rsc.d.ts","sourceRoot":"","sources":["../src/rsc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAClB,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EAEpB,YAAY,EACZ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,6BAA6B,EAC7B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAIlB,KAAK,iBAAiB,CACpB,KAAK,SAAS,YAAY,EAC1B,UAAU,SAAS,YAAY,IAC7B;IACF,CAAC,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,OAAO,CAC/C,oBAAoB,CAAC,UAAU,CAAC,CACjC,CAAC;IACF,QAAQ,EAAE,CACR,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,EACtC,IAAI,CAAC,EAAE,qBAAqB,CAC1B,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,EAClD,eAAe,CAAC,KAAK,CAAC,CACvB,KACE,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAChB,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,EACtC,IAAI,CAAC,EAAE,6BAA6B,CAClC,mBAAmB,CAAC,UAAU,CAAC,EAC/B,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,EAClD,eAAe,CAAC,KAAK,CAAC,CACvB,KACE,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB,CAAC;AAEF,KAAK,oBAAoB,CACvB,KAAK,SAAS,YAAY,EAC1B,OAAO,SAAS,YAAY,IAC1B;KACD,IAAI,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GACvD,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,GACvC,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GAClC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,GAC1C,KAAK;CACV,CAAC;AAEF,KAAK,MAAM,CAAC,OAAO,SAAS,SAAS,IAAI,UAAU,CACjD,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CACvE,CAAC;AAGF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,SAAS,SAAS,EAC9D,MAAM,EAAE,SAAS,SAAS,OAAO,GAC7B,SAAS,CAAC,6DAA6D,CAAC,GACxE,MAAM,CAAC,OAAO,CAAC,EACnB,cAAc,EAAE,MAAM,WAAW;IA2D/B;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;2BAhDyB;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE;EAmD5D"}

package/dist/rsc.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var unstableCoreDoNotImport = require('@trpc/server/unstable-core-do-not-import');
+var React = require('react');
+var getQueryKey = require('./internals/getQueryKey.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const HELPERS = [
+    'prefetch',
+    'prefetchInfinite'
+];
+// ts-prune-ignore-next
+/**
+ * @note This requires `@tanstack/react-query@^5.45.0`
+ */ function createHydrationHelpers(caller, getQueryClient) {
+    const wrappedProxy = unstableCoreDoNotImport.createRecursiveProxy(async ({ path , args  })=>{
+        const proc = path.reduce((acc, key)=>// @ts-expect-error - ??
+            HELPERS.includes(key) ? acc : acc[key], caller);
+        const input = args[0];
+        const promise = proc(input);
+        const queryFn = async ()=>{
+            const def = await caller._def();
+            const transformer = def._config.transformer;
+            return promise.then((value)=>transformer.output.serialize(value));
+        };
+        const helper = path.pop();
+        if (helper === 'prefetch') {
+            const args1 = args[1];
+            return getQueryClient().prefetchQuery({
+                ...args1,
+                queryKey: getQueryKey.getQueryKeyInternal(path, input, 'query'),
+                queryFn
+            });
+        }
+        if (helper === 'prefetchInfinite') {
+            const args11 = args[1];
+            return getQueryClient().prefetchInfiniteQuery({
+                ...args11,
+                queryKey: getQueryKey.getQueryKeyInternal(path, input, 'infinite'),
+                queryFn,
+                initialPageParam: args11?.initialCursor ?? null
+            });
+        }
+        return promise;
+    });
+    function HydrateClient(props) {
+        const dehydratedState = reactQuery.dehydrate(getQueryClient());
+        return /*#__PURE__*/ React__namespace.createElement(reactQuery.HydrationBoundary, {
+            state: dehydratedState
+        }, props.children);
+    }
+    return {
+        /***
+     * Wrapped caller with prefetch helpers
+     * Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
+     * or using prefetch helpers to put the promise into the QueryClient cache
+     * @example
+     * ```ts
+     * const data = await trpc.post.get("postId");
+     *
+     * // or
+     * void trpc.post.get.prefetch("postId");
+     * ```
+     */ trpc: wrappedProxy,
+        /**
+     * HoC to hydrate the query client for a client component
+     * to pick up the prefetched promise and skip an initial
+     * client-side fetch.
+     * @example
+     * ```tsx
+     * // MyRSC.tsx
+     * const MyRSC = ({ params }) => {
+     *   void trpc.post.get.prefetch(params.postId);
+     *
+     *   return (
+     *     <HydrateClient>
+     *       <MyCC postId={params.postId} />
+     *     </HydrateClient>
+     *    );
+     * };
+     *
+     * // MyCC.tsx
+     * "use client"
+     * const MyCC = ({ postId }) => {
+     *   const { data: post } = trpc.post.get.useQuery(postId);
+     *   return <div>{post.title}</div>;
+     * };
+     * ```
+     */ HydrateClient
+    };
+}
+
+exports.createHydrationHelpers = createHydrationHelpers;

package/dist/rsc.mjs

@@ -0,0 +1,91 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { createRecursiveProxy } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import { getQueryKeyInternal } from './internals/getQueryKey.mjs';
+
+const HELPERS = [
+    'prefetch',
+    'prefetchInfinite'
+];
+// ts-prune-ignore-next
+/**
+ * @note This requires `@tanstack/react-query@^5.45.0`
+ */ function createHydrationHelpers(caller, getQueryClient) {
+    const wrappedProxy = createRecursiveProxy(async ({ path , args  })=>{
+        const proc = path.reduce((acc, key)=>// @ts-expect-error - ??
+            HELPERS.includes(key) ? acc : acc[key], caller);
+        const input = args[0];
+        const promise = proc(input);
+        const queryFn = async ()=>{
+            const def = await caller._def();
+            const transformer = def._config.transformer;
+            return promise.then((value)=>transformer.output.serialize(value));
+        };
+        const helper = path.pop();
+        if (helper === 'prefetch') {
+            const args1 = args[1];
+            return getQueryClient().prefetchQuery({
+                ...args1,
+                queryKey: getQueryKeyInternal(path, input, 'query'),
+                queryFn
+            });
+        }
+        if (helper === 'prefetchInfinite') {
+            const args11 = args[1];
+            return getQueryClient().prefetchInfiniteQuery({
+                ...args11,
+                queryKey: getQueryKeyInternal(path, input, 'infinite'),
+                queryFn,
+                initialPageParam: args11?.initialCursor ?? null
+            });
+        }
+        return promise;
+    });
+    function HydrateClient(props) {
+        const dehydratedState = dehydrate(getQueryClient());
+        return /*#__PURE__*/ React.createElement(HydrationBoundary, {
+            state: dehydratedState
+        }, props.children);
+    }
+    return {
+        /***
+     * Wrapped caller with prefetch helpers
+     * Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
+     * or using prefetch helpers to put the promise into the QueryClient cache
+     * @example
+     * ```ts
+     * const data = await trpc.post.get("postId");
+     *
+     * // or
+     * void trpc.post.get.prefetch("postId");
+     * ```
+     */ trpc: wrappedProxy,
+        /**
+     * HoC to hydrate the query client for a client component
+     * to pick up the prefetched promise and skip an initial
+     * client-side fetch.
+     * @example
+     * ```tsx
+     * // MyRSC.tsx
+     * const MyRSC = ({ params }) => {
+     *   void trpc.post.get.prefetch(params.postId);
+     *
+     *   return (
+     *     <HydrateClient>
+     *       <MyCC postId={params.postId} />
+     *     </HydrateClient>
+     *    );
+     * };
+     *
+     * // MyCC.tsx
+     * "use client"
+     * const MyCC = ({ postId }) => {
+     *   const { data: post } = trpc.post.get.useQuery(postId);
+     *   return <div>{post.title}</div>;
+     * };
+     * ```
+     */ HydrateClient
+    };
+}
+
+export { createHydrationHelpers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/react-query",
-  "version": "11.0.0-rc.401+91720833b",
+  "version": "11.0.0-rc.403+ab71a1be6",
   "description": "The tRPC React library",
   "author": "KATT",
   "license": "MIT",
@@ -27,6 +27,11 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./rsc": {
+      "import": "./dist/rsc.mjs",
+      "require": "./dist/rsc.js",
+      "default": "./dist/rsc.js"
+    },
     "./server": {
       "import": "./dist/server/index.mjs",
       "require": "./dist/server/index.js",
@@ -43,6 +48,7 @@
     "src",
     "README.md",
     "package.json",
+    "rsc",
     "server",
     "shared",
     "!**/*.test.*"
@@ -57,16 +63,16 @@
     }
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.25.0",
-    "@trpc/client": "11.0.0-rc.401+91720833b",
-    "@trpc/server": "11.0.0-rc.401+91720833b",
+    "@tanstack/react-query": "^5.40.0",
+    "@trpc/client": "11.0.0-rc.403+ab71a1be6",
+    "@trpc/server": "11.0.0-rc.403+ab71a1be6",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^5.25.0",
-    "@trpc/client": "11.0.0-rc.401+91720833b",
-    "@trpc/server": "11.0.0-rc.401+91720833b",
+    "@tanstack/react-query": "^5.45.0",
+    "@trpc/client": "11.0.0-rc.403+ab71a1be6",
+    "@trpc/server": "11.0.0-rc.403+ab71a1be6",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.0",
     "@types/react": "^18.3.1",
@@ -86,5 +92,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "91720833b050e7ba5130dd51b3e03c4e860ed159"
+  "gitHead": "ab71a1be689e84b7503c6adbcd98c3c424217920"
 }

package/rsc/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/rsc';

package/rsc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/rsc');

package/src/rsc.tsx

@@ -0,0 +1,178 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  type QueryClient,
+} from '@tanstack/react-query';
+import type { TRPCClientError } from '@trpc/client';
+import type { inferTransformedProcedureOutput } from '@trpc/server';
+import {
+  createRecursiveProxy,
+  type AnyRouter,
+  type inferProcedureInput,
+  type RouterRecord,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
+  AnyProcedure,
+  AnyRootTypes,
+  inferProcedureOutput,
+  inferRouterRootTypes,
+  Maybe,
+  RouterCaller,
+  TypeError,
+} from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import { getQueryKeyInternal } from './internals/getQueryKey';
+import type {
+  TRPCFetchInfiniteQueryOptions,
+  TRPCFetchQueryOptions,
+} from './shared';
+
+const HELPERS = ['prefetch', 'prefetchInfinite'];
+
+type DecorateProcedure<
+  TRoot extends AnyRootTypes,
+  TProcedure extends AnyProcedure,
+> = {
+  (input: inferProcedureInput<TProcedure>): Promise<
+    inferProcedureOutput<TProcedure>
+  >;
+  prefetch: (
+    input: inferProcedureInput<TProcedure>,
+    opts?: TRPCFetchQueryOptions<
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
+    >,
+  ) => Promise<void>;
+  prefetchInfinite: (
+    input: inferProcedureInput<TProcedure>,
+    opts?: TRPCFetchInfiniteQueryOptions<
+      inferProcedureInput<TProcedure>,
+      inferTransformedProcedureOutput<TRoot, TProcedure>,
+      TRPCClientError<TRoot>
+    >,
+  ) => Promise<void>;
+};
+
+type DecorateRouterRecord<
+  TRoot extends AnyRootTypes,
+  TRecord extends RouterRecord,
+> = {
+  [TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure
+    ? DecorateProcedure<TRoot, TRecord[TKey]>
+    : TRecord[TKey] extends RouterRecord
+    ? DecorateRouterRecord<TRoot, TRecord[TKey]>
+    : never;
+};
+
+type Caller<TRouter extends AnyRouter> = ReturnType<
+  RouterCaller<inferRouterRootTypes<TRouter>, TRouter['_def']['record']>
+>;
+
+// ts-prune-ignore-next
+/**
+ * @note This requires `@tanstack/react-query@^5.45.0`
+ */
+export function createHydrationHelpers<TRouter extends AnyRouter>(
+  caller: AnyRouter extends TRouter
+    ? TypeError<'Generic parameter missing in `createHydrationHelpers<HERE>`'>
+    : Caller<TRouter>,
+  getQueryClient: () => QueryClient,
+) {
+  type RootTypes = inferRouterRootTypes<TRouter>;
+  const wrappedProxy = createRecursiveProxy(async ({ path, args }) => {
+    const proc = path.reduce(
+      (acc, key) =>
+        // @ts-expect-error - ??
+        HELPERS.includes(key) ? acc : acc[key],
+      caller,
+    ) as unknown as DecorateProcedure<RootTypes, AnyProcedure>;
+
+    const input = args[0];
+    const promise = proc(input);
+
+    const queryFn = async () => {
+      const def: AnyRouter['_def'] = await (caller as any)._def();
+      const transformer = def._config.transformer;
+      return promise.then((value) => transformer.output.serialize(value));
+    };
+
+    const helper = path.pop();
+    if (helper === 'prefetch') {
+      const args1 = args[1] as Maybe<
+        TRPCFetchInfiniteQueryOptions<any, any, any>
+      >;
+
+      return getQueryClient().prefetchQuery({
+        ...args1,
+        queryKey: getQueryKeyInternal(path, input, 'query'),
+        queryFn,
+      });
+    }
+    if (helper === 'prefetchInfinite') {
+      const args1 = args[1] as Maybe<
+        TRPCFetchInfiniteQueryOptions<any, any, any>
+      >;
+
+      return getQueryClient().prefetchInfiniteQuery({
+        ...args1,
+        queryKey: getQueryKeyInternal(path, input, 'infinite'),
+        queryFn,
+        initialPageParam: args1?.initialCursor ?? null,
+      });
+    }
+
+    return promise;
+  }) as DecorateRouterRecord<RootTypes, TRouter['_def']['record']>;
+
+  function HydrateClient(props: { children: React.ReactNode }) {
+    const dehydratedState = dehydrate(getQueryClient());
+
+    return (
+      <HydrationBoundary state={dehydratedState}>
+        {props.children}
+      </HydrationBoundary>
+    );
+  }
+
+  return {
+    /***
+     * Wrapped caller with prefetch helpers
+     * Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
+     * or using prefetch helpers to put the promise into the QueryClient cache
+     * @example
+     * ```ts
+     * const data = await trpc.post.get("postId");
+     *
+     * // or
+     * void trpc.post.get.prefetch("postId");
+     * ```
+     */
+    trpc: wrappedProxy,
+    /**
+     * HoC to hydrate the query client for a client component
+     * to pick up the prefetched promise and skip an initial
+     * client-side fetch.
+     * @example
+     * ```tsx
+     * // MyRSC.tsx
+     * const MyRSC = ({ params }) => {
+     *   void trpc.post.get.prefetch(params.postId);
+     *
+     *   return (
+     *     <HydrateClient>
+     *       <MyCC postId={params.postId} />
+     *     </HydrateClient>
+     *    );
+     * };
+     *
+     * // MyCC.tsx
+     * "use client"
+     * const MyCC = ({ postId }) => {
+     *   const { data: post } = trpc.post.get.useQuery(postId);
+     *   return <div>{post.title}</div>;
+     * };
+     * ```
+     */
+    HydrateClient,
+  };
+}