@trpc/react-query 11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439 → 11.0.0-alpha-tmp-app-router-example.364

package/dist/bundle-analysis.json

@@ -1,7 +1,7 @@
 {
-  "bundleSize": 28561,
-  "bundleOrigSize": 62613,
-  "bundleReduction": 54.38,
+  "bundleSize": 29442,
+  "bundleOrigSize": 64714,
+  "bundleReduction": 54.5,
   "modules": [
     {
       "id": "/src/shared/hooks/createHooksInternal.tsx",
@@ -14,7 +14,7 @@
       "dependents": [
         "/src/createTRPCReact.tsx"
       ],
-      "percent": 45.07,
+      "percent": 43.72,
       "reduction": 13.84
     },
     {
@@ -29,7 +29,7 @@
         "/src/createTRPCQueryUtils.tsx",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 13.24,
+      "percent": 12.85,
       "reduction": 6.34
     },
     {
@@ -43,7 +43,7 @@
       "dependents": [
         "/src/server/index.ts"
       ],
-      "percent": 12.86,
+      "percent": 12.48,
       "reduction": 50.38
     },
     {
@@ -59,7 +59,7 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 10.05,
+      "percent": 9.74,
       "reduction": 74.38
     },
     {
@@ -73,14 +73,27 @@
       "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": 7,
+      "percent": 6.79,
       "reduction": 42.49
     },
+    {
+      "id": "/src/rsc.tsx",
+      "size": 881,
+      "origSize": 2101,
+      "renderedExports": [
+        "createHydrationHelpers"
+      ],
+      "removedExports": [],
+      "dependents": [],
+      "percent": 2.99,
+      "reduction": 58.07
+    },
     {
       "id": "/src/createTRPCReact.tsx",
       "size": 850,
@@ -93,7 +106,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 2.98,
+      "percent": 2.89,
       "reduction": 89.28
     },
     {
@@ -107,7 +120,7 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 2.82,
+      "percent": 2.74,
       "reduction": 23.16
     },
     {
@@ -122,7 +135,7 @@
         "/src/shared/index.ts",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 1.99,
+      "percent": 1.93,
       "reduction": 82.03
     },
     {
@@ -138,7 +151,7 @@
         "/src/shared/hooks/createHooksInternal.tsx",
         "/src/utils/createUtilityFunctions.ts"
       ],
-      "percent": 1.66,
+      "percent": 1.61,
       "reduction": 17.31
     },
     {
@@ -152,7 +165,7 @@
       "dependents": [
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 0.78,
+      "percent": 0.75,
       "reduction": 36.21
     },
     {
@@ -166,7 +179,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 0.57,
+      "percent": 0.55,
       "reduction": 66.6
     },
     {
@@ -184,7 +197,7 @@
         "/src/shared/proxy/utilsProxy.ts",
         "/src/shared/hooks/createHooksInternal.tsx"
       ],
-      "percent": 0.54,
+      "percent": 0.52,
       "reduction": 97.59
     },
     {
@@ -198,7 +211,7 @@
       "dependents": [
         "/src/shared/index.ts"
       ],
-      "percent": 0.45,
+      "percent": 0.44,
       "reduction": 74.9
     },
     {
@@ -236,5 +249,5 @@
       "reduction": 100
     }
   ],
-  "moduleCount": 16
+  "moduleCount": 17
 }

package/dist/rsc.d.ts

@@ -0,0 +1,17 @@
+import { type QueryClient } from '@tanstack/react-query';
+import { type AnyRouter, type inferProcedureInput, type RouterRecord } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyProcedure, inferProcedureOutput, RouterCaller, TypeError } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+type DecorateProcedure<TProcedure extends AnyProcedure> = (input: inferProcedureInput<TProcedure>) => Promise<inferProcedureOutput<TProcedure>>;
+type DecorateRouterRecord<TRecord extends RouterRecord> = {
+    [TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure ? DecorateProcedure<TRecord[TKey]> : TRecord[TKey] extends RouterRecord ? DecorateRouterRecord<TRecord[TKey]> : never;
+};
+type Caller<TRouter extends AnyRouter> = ReturnType<RouterCaller<TRouter['_def']['_config']['$types'], TRouter['_def']['record']>>;
+export declare function createHydrationHelpers<TRouter extends AnyRouter>(caller: AnyRouter extends TRouter ? TypeError<'Generic parameter missing in `createHydrationHelpers<HERE>`'> : Caller<TRouter>, getQueryClient: () => QueryClient): {
+    trpc: DecorateRouterRecord<TRouter["_def"]["record"]>;
+    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,EAEL,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAClB,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EACV,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,iBAAiB,CAAC,UAAU,SAAS,YAAY,IAAI,CACxD,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,KACnC,OAAO,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC,CAAC;AAE/C,KAAK,oBAAoB,CAAC,OAAO,SAAS,YAAY,IAAI;KACvD,IAAI,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GACvD,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAChC,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GAClC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GACnC,KAAK;CACV,CAAC;AAEF,KAAK,MAAM,CAAC,OAAO,SAAS,SAAS,IAAI,UAAU,CACjD,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAC9E,CAAC;AAEF,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;;2BAoBH;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE;EAW5D"}

package/dist/rsc.js

@@ -0,0 +1,51 @@
+'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);
+
+function createHydrationHelpers(caller, getQueryClient) {
+    const wrappedProxy = unstableCoreDoNotImport.createRecursiveProxy(async ({ path , args  })=>{
+        const proc = path.reduce(// @ts-expect-error - ??
+        (acc, key)=>acc[key], caller);
+        const [input] = args;
+        const promise = proc(input);
+        void getQueryClient().prefetchQuery({
+            queryKey: getQueryKey.getQueryKeyInternal(path, input, 'query'),
+            queryFn: ()=>promise
+        });
+        return promise;
+    });
+    function HydrateClient(props) {
+        const dehydratedState = reactQuery.dehydrate(getQueryClient()); // TODO: transform??
+        return /*#__PURE__*/ React__namespace.createElement(reactQuery.HydrationBoundary, {
+            state: dehydratedState
+        }, props.children);
+    }
+    return {
+        trpc: wrappedProxy,
+        HydrateClient
+    };
+}
+
+exports.createHydrationHelpers = createHydrationHelpers;

package/dist/rsc.mjs

@@ -0,0 +1,30 @@
+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';
+
+function createHydrationHelpers(caller, getQueryClient) {
+    const wrappedProxy = createRecursiveProxy(async ({ path , args  })=>{
+        const proc = path.reduce(// @ts-expect-error - ??
+        (acc, key)=>acc[key], caller);
+        const [input] = args;
+        const promise = proc(input);
+        void getQueryClient().prefetchQuery({
+            queryKey: getQueryKeyInternal(path, input, 'query'),
+            queryFn: ()=>promise
+        });
+        return promise;
+    });
+    function HydrateClient(props) {
+        const dehydratedState = dehydrate(getQueryClient()); // TODO: transform??
+        return /*#__PURE__*/ React.createElement(HydrationBoundary, {
+            state: dehydratedState
+        }, props.children);
+    }
+    return {
+        trpc: wrappedProxy,
+        HydrateClient
+    };
+}
+
+export { createHydrationHelpers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/react-query",
-  "version": "11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439+2c13b76ef",
+  "version": "11.0.0-alpha-tmp-app-router-example.364+4d068acf1",
   "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,24 +63,24 @@
     }
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.25.0",
-    "@trpc/client": "11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439+2c13b76ef",
-    "@trpc/server": "11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439+2c13b76ef",
+    "@tanstack/react-query": "^5.40.0",
+    "@trpc/client": "11.0.0-alpha-tmp-app-router-example.364+4d068acf1",
+    "@trpc/server": "11.0.0-alpha-tmp-app-router-example.364+4d068acf1",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^5.25.0",
-    "@trpc/client": "11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439+2c13b76ef",
-    "@trpc/server": "11.0.0-alpha-tmp-04-26-resolveResponse-and-multi.439+2c13b76ef",
+    "@tanstack/react-query": "^5.40.0",
+    "@trpc/client": "11.0.0-alpha-tmp-app-router-example.364+4d068acf1",
+    "@trpc/server": "11.0.0-alpha-tmp-app-router-example.364+4d068acf1",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.0",
-    "@types/react": "^18.3.0",
+    "@types/react": "^18.3.1",
     "eslint": "^8.56.0",
     "express": "^4.17.1",
     "next": "^14.1.4",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^4.9.5",
     "tsx": "^4.0.0",
     "zod": "^3.0.0"
@@ -85,5 +91,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "2c13b76ef25133176054f37d8da3a601de5e356d"
+  "gitHead": "4d068acf1d662ab7a081af1641ee5831f5f78d51"
 }

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,72 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  type QueryClient,
+} from '@tanstack/react-query';
+import {
+  createRecursiveProxy,
+  type AnyRouter,
+  type inferProcedureInput,
+  type RouterRecord,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
+  AnyProcedure,
+  inferProcedureOutput,
+  RouterCaller,
+  TypeError,
+} from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import { getQueryKeyInternal } from './internals/getQueryKey';
+
+type DecorateProcedure<TProcedure extends AnyProcedure> = (
+  input: inferProcedureInput<TProcedure>,
+) => Promise<inferProcedureOutput<TProcedure>>;
+
+type DecorateRouterRecord<TRecord extends RouterRecord> = {
+  [TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure
+    ? DecorateProcedure<TRecord[TKey]>
+    : TRecord[TKey] extends RouterRecord
+    ? DecorateRouterRecord<TRecord[TKey]>
+    : never;
+};
+
+type Caller<TRouter extends AnyRouter> = ReturnType<
+  RouterCaller<TRouter['_def']['_config']['$types'], TRouter['_def']['record']>
+>;
+
+export function createHydrationHelpers<TRouter extends AnyRouter>(
+  caller: AnyRouter extends TRouter
+    ? TypeError<'Generic parameter missing in `createHydrationHelpers<HERE>`'>
+    : Caller<TRouter>,
+  getQueryClient: () => QueryClient,
+) {
+  const wrappedProxy = createRecursiveProxy(async ({ path, args }) => {
+    const proc = path.reduce(
+      // @ts-expect-error - ??
+      (acc, key) => acc[key],
+      caller,
+    ) as unknown as DecorateProcedure<AnyProcedure>;
+
+    const [input] = args;
+    const promise = proc(input);
+
+    void getQueryClient().prefetchQuery({
+      queryKey: getQueryKeyInternal(path, input, 'query'),
+      queryFn: () => promise,
+    });
+
+    return promise;
+  }) as DecorateRouterRecord<TRouter['_def']['record']>;
+
+  function HydrateClient(props: { children: React.ReactNode }) {
+    const dehydratedState = dehydrate(getQueryClient()); // TODO: transform??
+
+    return (
+      <HydrationBoundary state={dehydratedState}>
+        {props.children}
+      </HydrationBoundary>
+    );
+  }
+
+  return { trpc: wrappedProxy, HydrateClient };
+}