@trpc/react-query 11.0.0-alpha-tmp-02-08-tmp.275 → 11.0.0-alpha-tmp-app-router-example.281

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;;2BAkBH;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE;EAW5D"}

package/dist/rsc.js

@@ -0,0 +1,49 @@
+'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 result = await proc(input);
+        const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'query');
+        getQueryClient().setQueryData(queryKey, result);
+        return result;
+    });
+    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,28 @@
+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 result = await proc(input);
+        const queryKey = getQueryKeyInternal(path, input, 'query');
+        getQueryClient().setQueryData(queryKey, result);
+        return result;
+    });
+    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-02-08-tmp.275+99017b9ae",
+  "version": "11.0.0-alpha-tmp-app-router-example.281+1b2ea2dd7",
   "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.*"
@@ -58,15 +64,15 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-02-08-tmp.275+99017b9ae",
-    "@trpc/server": "11.0.0-alpha-tmp-02-08-tmp.275+99017b9ae",
+    "@trpc/client": "11.0.0-alpha-tmp-app-router-example.281+1b2ea2dd7",
+    "@trpc/server": "11.0.0-alpha-tmp-app-router-example.281+1b2ea2dd7",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-02-08-tmp.275+99017b9ae",
-    "@trpc/server": "11.0.0-alpha-tmp-02-08-tmp.275+99017b9ae",
+    "@trpc/client": "11.0.0-alpha-tmp-app-router-example.281+1b2ea2dd7",
+    "@trpc/server": "11.0.0-alpha-tmp-app-router-example.281+1b2ea2dd7",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.33",
@@ -85,5 +91,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "99017b9ae645f34e37d0fa9281b27c02657493eb"
+  "gitHead": "1b2ea2dd7010e1964cb3b5d7f338179315b2c1be"
 }

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,70 @@
+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 result = await proc(input);
+
+    const queryKey = getQueryKeyInternal(path, input, 'query');
+    getQueryClient().setQueryData(queryKey, result);
+
+    return result;
+  }) 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 };
+}

package/dist/bundle-analysis.json

@@ -1,240 +0,0 @@
-{
-  "bundleSize": 27242,
-  "bundleOrigSize": 60201,
-  "bundleReduction": 54.75,
-  "modules": [
-    {
-      "id": "/src/shared/hooks/createHooksInternal.tsx",
-      "size": 12372,
-      "origSize": 14404,
-      "renderedExports": [
-        "createRootHooks"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/createTRPCReact.tsx"
-      ],
-      "percent": 45.42,
-      "reduction": 14.11
-    },
-    {
-      "id": "/src/server/ssgProxy.ts",
-      "size": 3673,
-      "origSize": 7403,
-      "renderedExports": [
-        "createServerSideHelpers"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/server/index.ts"
-      ],
-      "percent": 13.48,
-      "reduction": 50.38
-    },
-    {
-      "id": "/src/utils/createUtilityFunctions.ts",
-      "size": 3334,
-      "origSize": 3725,
-      "renderedExports": [
-        "createUtilityFunctions"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/createTRPCQueryUtils.tsx",
-        "/src/shared/hooks/createHooksInternal.tsx"
-      ],
-      "percent": 12.24,
-      "reduction": 10.5
-    },
-    {
-      "id": "/src/shared/proxy/utilsProxy.ts",
-      "size": 2745,
-      "origSize": 10534,
-      "renderedExports": [
-        "getQueryType",
-        "createReactQueryUtils",
-        "createQueryUtilsProxy"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts"
-      ],
-      "percent": 10.08,
-      "reduction": 73.94
-    },
-    {
-      "id": "/src/internals/getQueryKey.ts",
-      "size": 1894,
-      "origSize": 3254,
-      "renderedExports": [
-        "getQueryKeyInternal",
-        "getQueryKey"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/index.ts",
-        "/src/server/ssgProxy.ts",
-        "/src/shared/proxy/utilsProxy.ts",
-        "/src/shared/proxy/useQueriesProxy.ts",
-        "/src/shared/hooks/createHooksInternal.tsx"
-      ],
-      "percent": 6.95,
-      "reduction": 41.79
-    },
-    {
-      "id": "/src/createTRPCReact.tsx",
-      "size": 850,
-      "origSize": 7749,
-      "renderedExports": [
-        "createHooksInternal",
-        "createTRPCReact"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/index.ts"
-      ],
-      "percent": 3.12,
-      "reduction": 89.03
-    },
-    {
-      "id": "/src/shared/proxy/decorationProxy.ts",
-      "size": 806,
-      "origSize": 1049,
-      "renderedExports": [
-        "createReactDecoration"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts"
-      ],
-      "percent": 2.96,
-      "reduction": 23.16
-    },
-    {
-      "id": "/src/shared/proxy/useQueriesProxy.ts",
-      "size": 569,
-      "origSize": 3167,
-      "renderedExports": [
-        "createUseQueries"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts",
-        "/src/shared/hooks/createHooksInternal.tsx"
-      ],
-      "percent": 2.09,
-      "reduction": 82.03
-    },
-    {
-      "id": "/src/internals/getClientArgs.ts",
-      "size": 332,
-      "origSize": 402,
-      "renderedExports": [
-        "getClientArgs"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts",
-        "/src/shared/hooks/createHooksInternal.tsx",
-        "/src/utils/createUtilityFunctions.ts"
-      ],
-      "percent": 1.22,
-      "reduction": 17.41
-    },
-    {
-      "id": "/src/internals/useHookResult.ts",
-      "size": 222,
-      "origSize": 348,
-      "renderedExports": [
-        "useHookResult"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/hooks/createHooksInternal.tsx"
-      ],
-      "percent": 0.81,
-      "reduction": 36.21
-    },
-    {
-      "id": "/src/createTRPCQueryUtils.tsx",
-      "size": 162,
-      "origSize": 485,
-      "renderedExports": [
-        "createTRPCQueryUtils"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/index.ts"
-      ],
-      "percent": 0.59,
-      "reduction": 66.6
-    },
-    {
-      "id": "/src/internals/context.tsx",
-      "size": 154,
-      "origSize": 6094,
-      "renderedExports": [
-        "contextProps",
-        "TRPCContext"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts",
-        "/src/shared/index.ts",
-        "/src/shared/proxy/utilsProxy.ts",
-        "/src/shared/hooks/createHooksInternal.tsx"
-      ],
-      "percent": 0.57,
-      "reduction": 97.47
-    },
-    {
-      "id": "/src/shared/queryClient.ts",
-      "size": 129,
-      "origSize": 514,
-      "renderedExports": [
-        "getQueryClient"
-      ],
-      "removedExports": [],
-      "dependents": [
-        "/src/shared/index.ts"
-      ],
-      "percent": 0.47,
-      "reduction": 74.9
-    },
-    {
-      "id": "/src/index.ts",
-      "size": 0,
-      "origSize": 313,
-      "renderedExports": [],
-      "removedExports": [],
-      "dependents": [],
-      "percent": 0,
-      "reduction": 100
-    },
-    {
-      "id": "/src/server/index.ts",
-      "size": 0,
-      "origSize": 54,
-      "renderedExports": [],
-      "removedExports": [],
-      "dependents": [],
-      "percent": 0,
-      "reduction": 100
-    },
-    {
-      "id": "/src/shared/index.ts",
-      "size": 0,
-      "origSize": 706,
-      "renderedExports": [],
-      "removedExports": [],
-      "dependents": [
-        "/src/createTRPCReact.tsx",
-        "/src/createTRPCQueryUtils.tsx",
-        "/src/server/ssgProxy.ts"
-      ],
-      "percent": 0,
-      "reduction": 100
-    }
-  ],
-  "moduleCount": 16
-}