@trpc/react-query 10.0.0-proxy-beta.21

package/dist/ssg/index.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactQuery = require('@tanstack/react-query');
+var server = require('@trpc/server');
+var getArrayQueryKey = require('../getArrayQueryKey-a2092b3c.js');
+var shared = require('@trpc/server/shared');
+require('react');
+require('@trpc/client');
+var queryClient = require('../queryClient-83576230.js');
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ * @deprecated use `createProxySSGHelpers` instead
+ */ function createSSGHelpers(opts) {
+    const { router , transformer , ctx  } = opts;
+    const queryClient$1 = queryClient.getQueryClient(opts);
+    const serialize = transformer ? ('input' in transformer ? transformer.input : transformer).serialize : (obj)=>obj;
+    const prefetchQuery = async (...pathAndInput)=>{
+        return queryClient$1.prefetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+            return server.callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const prefetchInfiniteQuery = async (...pathAndInput)=>{
+        return queryClient$1.prefetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+            return server.callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const fetchQuery = async (...pathAndInput)=>{
+        return queryClient$1.fetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+            return server.callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const fetchInfiniteQuery = async (...pathAndInput)=>{
+        return queryClient$1.fetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>{
+            return server.callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    function _dehydrate(opts = {
+        shouldDehydrateQuery () {
+            // makes sure to serialize errors
+            return true;
+        }
+    }) {
+        const before = reactQuery.dehydrate(queryClient$1, opts);
+        const after = serialize(before);
+        return after;
+    }
+    return {
+        prefetchQuery,
+        prefetchInfiniteQuery,
+        fetchQuery,
+        fetchInfiniteQuery,
+        dehydrate: _dehydrate,
+        queryClient: queryClient$1
+    };
+}
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ */ function createProxySSGHelpers(opts) {
+    const helpers = createSSGHelpers(opts);
+    return shared.createFlatProxy((key)=>{
+        if (key === 'queryClient') {
+            return helpers.queryClient;
+        }
+        if (key === 'dehydrate') {
+            return helpers.dehydrate;
+        }
+        return shared.createRecursiveProxy((opts)=>{
+            const args = opts.args;
+            const pathCopy = [
+                key,
+                ...opts.path
+            ];
+            const utilName = pathCopy.pop();
+            const fullPath = pathCopy.join('.');
+            switch(utilName){
+                case 'fetch':
+                    {
+                        return helpers.fetchQuery(fullPath, ...args);
+                    }
+                case 'fetchInfinite':
+                    {
+                        return helpers.fetchInfiniteQuery(fullPath, ...args);
+                    }
+                case 'prefetch':
+                    {
+                        return helpers.prefetchQuery(fullPath, ...args);
+                    }
+                case 'prefetchInfinite':
+                    {
+                        return helpers.prefetchInfiniteQuery(fullPath, ...args);
+                    }
+            }
+        });
+    });
+}
+
+exports.createProxySSGHelpers = createProxySSGHelpers;
+exports.createSSGHelpers = createSSGHelpers;

package/dist/ssg/index.mjs

@@ -0,0 +1,121 @@
+import { dehydrate } from '@tanstack/react-query';
+import { callProcedure } from '@trpc/server';
+import { g as getArrayQueryKey } from '../getArrayQueryKey-062214e0.mjs';
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
+import 'react';
+import '@trpc/client';
+import { g as getQueryClient } from '../queryClient-0569f6e0.mjs';
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ * @deprecated use `createProxySSGHelpers` instead
+ */ function createSSGHelpers(opts) {
+    const { router , transformer , ctx  } = opts;
+    const queryClient = getQueryClient(opts);
+    const serialize = transformer ? ('input' in transformer ? transformer.input : transformer).serialize : (obj)=>obj;
+    const prefetchQuery = async (...pathAndInput)=>{
+        return queryClient.prefetchQuery(getArrayQueryKey(pathAndInput), ()=>{
+            return callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const prefetchInfiniteQuery = async (...pathAndInput)=>{
+        return queryClient.prefetchInfiniteQuery(getArrayQueryKey(pathAndInput), ()=>{
+            return callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const fetchQuery = async (...pathAndInput)=>{
+        return queryClient.fetchQuery(getArrayQueryKey(pathAndInput), ()=>{
+            return callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    const fetchInfiniteQuery = async (...pathAndInput)=>{
+        return queryClient.fetchInfiniteQuery(getArrayQueryKey(pathAndInput), ()=>{
+            return callProcedure({
+                procedures: router._def.procedures,
+                path: pathAndInput[0],
+                rawInput: pathAndInput[1],
+                ctx,
+                type: 'query'
+            });
+        });
+    };
+    function _dehydrate(opts = {
+        shouldDehydrateQuery () {
+            // makes sure to serialize errors
+            return true;
+        }
+    }) {
+        const before = dehydrate(queryClient, opts);
+        const after = serialize(before);
+        return after;
+    }
+    return {
+        prefetchQuery,
+        prefetchInfiniteQuery,
+        fetchQuery,
+        fetchInfiniteQuery,
+        dehydrate: _dehydrate,
+        queryClient
+    };
+}
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ */ function createProxySSGHelpers(opts) {
+    const helpers = createSSGHelpers(opts);
+    return createFlatProxy((key)=>{
+        if (key === 'queryClient') {
+            return helpers.queryClient;
+        }
+        if (key === 'dehydrate') {
+            return helpers.dehydrate;
+        }
+        return createRecursiveProxy((opts)=>{
+            const args = opts.args;
+            const pathCopy = [
+                key,
+                ...opts.path
+            ];
+            const utilName = pathCopy.pop();
+            const fullPath = pathCopy.join('.');
+            switch(utilName){
+                case 'fetch':
+                    {
+                        return helpers.fetchQuery(fullPath, ...args);
+                    }
+                case 'fetchInfinite':
+                    {
+                        return helpers.fetchInfiniteQuery(fullPath, ...args);
+                    }
+                case 'prefetch':
+                    {
+                        return helpers.prefetchQuery(fullPath, ...args);
+                    }
+                case 'prefetchInfinite':
+                    {
+                        return helpers.prefetchInfiniteQuery(fullPath, ...args);
+                    }
+            }
+        });
+    });
+}
+
+export { createProxySSGHelpers, createSSGHelpers };

package/dist/ssg/ssg.d.ts

@@ -0,0 +1,23 @@
+import { DehydrateOptions, DehydratedState, InfiniteData } from '@tanstack/react-query';
+import { AnyRouter, ClientDataTransformerOptions, inferProcedureOutput, inferRouterContext } from '@trpc/server';
+import { CreateTRPCReactQueryClientConfig } from '../shared';
+interface CreateSSGHelpersOptionsBase<TRouter extends AnyRouter> {
+    router: TRouter;
+    ctx: inferRouterContext<TRouter>;
+    transformer?: ClientDataTransformerOptions;
+}
+export declare type CreateSSGHelpersOptions<TRouter extends AnyRouter> = CreateSSGHelpersOptionsBase<TRouter> & CreateTRPCReactQueryClientConfig;
+/**
+ * Create functions you can use for server-side rendering / static generation
+ * @deprecated use `createProxySSGHelpers` instead
+ */
+export declare function createSSGHelpers<TRouter extends AnyRouter>(opts: CreateSSGHelpersOptions<TRouter>): {
+    prefetchQuery: <TPath extends keyof TRouter["_def"]["queries"] & string, TProcedure extends TRouter["_def"]["queries"][TPath]>(path: TPath, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TProcedure>>) => Promise<void>;
+    prefetchInfiniteQuery: <TPath_1 extends keyof TRouter["_def"]["queries"] & string, TProcedure_1 extends TRouter["_def"]["queries"][TPath_1]>(path: TPath_1, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TProcedure_1>>) => Promise<void>;
+    fetchQuery: <TPath_2 extends keyof TRouter["_def"]["queries"] & string, TProcedure_2 extends TRouter["_def"]["queries"][TPath_2], TOutput extends inferProcedureOutput<TProcedure_2>>(path: TPath_2, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TProcedure_2>>) => Promise<TOutput>;
+    fetchInfiniteQuery: <TPath_3 extends keyof TRouter["_def"]["queries"] & string, TProcedure_3 extends TRouter["_def"]["queries"][TPath_3], TOutput_1 extends inferProcedureOutput<TProcedure_3>>(path: TPath_3, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TProcedure_3>>) => Promise<InfiniteData<TOutput_1>>;
+    dehydrate: (opts?: DehydrateOptions) => DehydratedState;
+    queryClient: import("@tanstack/react-query").QueryClient;
+};
+export {};
+//# sourceMappingURL=ssg.d.ts.map

package/dist/ssg/ssg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssg.d.ts","sourceRoot":"","sources":["../../../../packages/react-query/src/ssg/ssg.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,4BAA4B,EAG5B,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,gCAAgC,EAAkB,MAAM,WAAW,CAAC;AAE7E,UAAU,2BAA2B,CAAC,OAAO,SAAS,SAAS;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C;AACD,oBAAY,uBAAuB,CAAC,OAAO,SAAS,SAAS,IAC3D,2BAA2B,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,SAAS,SAAS,EACxD,IAAI,EAAE,uBAAuB,CAAC,OAAO,CAAC;;;;;uBAuF9B,gBAAgB,KAMrB,eAAe;;EAcnB"}

package/dist/ssg/ssgProxy.d.ts

@@ -0,0 +1,36 @@
+import { DehydrateOptions, DehydratedState, InfiniteData, QueryClient } from '@tanstack/react-query';
+import { AnyProcedure, AnyQueryProcedure, AnyRouter, Filter, inferHandlerInput, inferProcedureOutput } from '@trpc/server';
+import { CreateSSGHelpersOptions } from './ssg';
+declare type DecorateProcedure<TProcedure extends AnyProcedure> = {
+    /**
+     * @link https://react-query.tanstack.com/guides/prefetching
+     */
+    fetch(...args: inferHandlerInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+    /**
+     * @link https://react-query.tanstack.com/guides/prefetching
+     */
+    fetchInfinite(...args: inferHandlerInput<TProcedure>): Promise<InfiniteData<inferProcedureOutput<TProcedure>>>;
+    /**
+     * @link https://react-query.tanstack.com/guides/prefetching
+     */
+    prefetch(...args: inferHandlerInput<TProcedure>): Promise<void>;
+    /**
+     * @link https://react-query.tanstack.com/guides/prefetching
+     */
+    prefetchInfinite(...args: inferHandlerInput<TProcedure>): Promise<void>;
+};
+/**
+ * @internal
+ */
+export declare type DecoratedProcedureSSGRecord<TRouter extends AnyRouter> = {
+    [TKey in keyof Filter<TRouter['_def']['record'], AnyRouter | AnyQueryProcedure>]: TRouter['_def']['record'][TKey] extends AnyRouter ? DecoratedProcedureSSGRecord<TRouter['_def']['record'][TKey]> : DecorateProcedure<TRouter['_def']['record'][TKey]>;
+};
+/**
+ * Create functions you can use for server-side rendering / static generation
+ */
+export declare function createProxySSGHelpers<TRouter extends AnyRouter>(opts: CreateSSGHelpersOptions<TRouter>): {
+    queryClient: QueryClient;
+    dehydrate: (opts?: DehydrateOptions) => DehydratedState;
+} & DecoratedProcedureSSGRecord<TRouter>;
+export {};
+//# sourceMappingURL=ssgProxy.d.ts.map

package/dist/ssg/ssgProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssgProxy.d.ts","sourceRoot":"","sources":["../../../../packages/react-query/src/ssg/ssgProxy.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,uBAAuB,EAAoB,MAAM,OAAO,CAAC;AAElE,aAAK,iBAAiB,CAAC,UAAU,SAAS,YAAY,IAAI;IACxD;;OAEG;IACH,KAAK,CACH,GAAG,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,GACrC,OAAO,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE7C;;OAEG;IACH,aAAa,CACX,GAAG,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,GACrC,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAE3D;;OAEG;IACH,QAAQ,CAAC,GAAG,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhE;;OAEG;IACH,gBAAgB,CAAC,GAAG,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzE,CAAC;AAEF;;GAEG;AACH,oBAAY,2BAA2B,CAAC,OAAO,SAAS,SAAS,IAAI;KAClE,IAAI,IAAI,MAAM,MAAM,CACnB,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EACzB,SAAS,GAAG,iBAAiB,CAC9B,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GACjD,2BAA2B,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,GAE5D,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;CACvD,CAAC;AAIF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,SAAS,SAAS,EAC7D,IAAI,EAAE,uBAAuB,CAAC,OAAO,CAAC;iBAKvB,WAAW;uBACL,gBAAgB,KAAK,eAAe;yCAoC1D"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@trpc/react-query",
+  "version": "10.0.0-proxy-beta.21",
+  "description": "tRPC React lib",
+  "author": "KATT",
+  "license": "MIT",
+  "homepage": "https://trpc.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/trpc/trpc.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "ts-watch": "tsc --project tsconfig.watch.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./ssg": {
+      "import": "./dist/ssg/index.mjs",
+      "require": "./dist/ssg/index.js",
+      "default": "./dist/ssg/index.js"
+    },
+    "./shared": {
+      "import": "./dist/shared/index.mjs",
+      "require": "./dist/shared/index.js",
+      "default": "./dist/shared/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "ssg",
+    "shared"
+  ],
+  "eslintConfig": {
+    "rules": {
+      "react-hooks/exhaustive-deps": "error",
+      "no-restricted-imports": [
+        "error",
+        "@trpc/react-query"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.3.8",
+    "@trpc/client": "10.0.0-proxy-beta.21",
+    "@trpc/server": "10.0.0-proxy-beta.21",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^4.3.8",
+    "@trpc/client": "10.0.0-proxy-beta.21",
+    "@trpc/server": "10.0.0-proxy-beta.21",
+    "@types/express": "^4.17.12",
+    "@types/node": "^18.7.20",
+    "express": "^4.17.1",
+    "next": "^12.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "fe59220aff5619507f2cf1a7bd9fd6a6489cc364"
+}

package/shared/index.d.ts

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

package/shared/index.js

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

package/src/createTRPCReact.tsx

@@ -0,0 +1,164 @@
+import { TRPCClientErrorLike } from '@trpc/client';
+import {
+  AnyMutationProcedure,
+  AnyProcedure,
+  AnyQueryProcedure,
+  AnyRouter,
+  AnySubscriptionProcedure,
+  ProcedureRouterRecord,
+  inferProcedureInput,
+  inferProcedureOutput,
+} from '@trpc/server';
+import { inferObservableValue } from '@trpc/server/observable';
+import { createFlatProxy } from '@trpc/server/shared';
+import { useMemo } from 'react';
+import {
+  CreateReactUtilsProxy,
+  createReactProxyDecoration,
+  createReactQueryUtilsProxy,
+} from './shared';
+import {
+  CreateClient,
+  CreateReactQueryHooks,
+  TRPCProvider,
+  UseDehydratedState,
+  UseTRPCInfiniteQueryOptions,
+  UseTRPCInfiniteQueryResult,
+  UseTRPCMutationOptions,
+  UseTRPCMutationResult,
+  UseTRPCQueryOptions,
+  UseTRPCQueryResult,
+  UseTRPCSubscriptionOptions,
+  createHooksInternal,
+} from './shared/hooks/createHooksInternal';
+import { CreateTRPCReactOptions } from './shared/types';
+
+/**
+ * @internal
+ */
+export type DecorateProcedure<
+  TProcedure extends AnyProcedure,
+  TPath extends string,
+> = TProcedure extends AnyQueryProcedure
+  ? {
+      useQuery: <
+        TQueryFnData = inferProcedureOutput<TProcedure>,
+        TData = inferProcedureOutput<TProcedure>,
+      >(
+        input: inferProcedureInput<TProcedure>,
+        opts?: UseTRPCQueryOptions<
+          TPath,
+          inferProcedureInput<TProcedure>,
+          TQueryFnData,
+          TData,
+          TRPCClientErrorLike<TProcedure>
+        >,
+      ) => UseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
+    } & (inferProcedureInput<TProcedure> extends { cursor?: any }
+      ? {
+          useInfiniteQuery: <
+            _TQueryFnData = inferProcedureOutput<TProcedure>,
+            TData = inferProcedureOutput<TProcedure>,
+          >(
+            input: Omit<inferProcedureInput<TProcedure>, 'cursor'>,
+            opts?: UseTRPCInfiniteQueryOptions<
+              TPath,
+              inferProcedureInput<TProcedure>,
+              TData,
+              TRPCClientErrorLike<TProcedure>
+            >,
+          ) => UseTRPCInfiniteQueryResult<
+            TData,
+            TRPCClientErrorLike<TProcedure>
+          >;
+        }
+      : {})
+  : TProcedure extends AnyMutationProcedure
+  ? {
+      useMutation: <TContext = unknown>(
+        opts?: UseTRPCMutationOptions<
+          inferProcedureInput<TProcedure>,
+          TRPCClientErrorLike<TProcedure>,
+          inferProcedureOutput<TProcedure>,
+          TContext
+        >,
+      ) => UseTRPCMutationResult<
+        inferProcedureOutput<TProcedure>,
+        TRPCClientErrorLike<TProcedure>,
+        inferProcedureInput<TProcedure>,
+        TContext
+      >;
+    }
+  : TProcedure extends AnySubscriptionProcedure
+  ? {
+      useSubscription: (
+        input: inferProcedureInput<TProcedure>,
+        opts?: UseTRPCSubscriptionOptions<
+          inferObservableValue<inferProcedureOutput<TProcedure>>,
+          TRPCClientErrorLike<TProcedure>
+        >,
+      ) => void;
+    }
+  : never;
+
+/**
+ * @internal
+ */
+export type DecoratedProcedureRecord<
+  TProcedures extends ProcedureRouterRecord,
+  TPath extends string = '',
+> = {
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? DecoratedProcedureRecord<
+        TProcedures[TKey]['_def']['record'],
+        `${TPath}${TKey & string}.`
+      >
+    : TProcedures[TKey] extends AnyProcedure
+    ? DecorateProcedure<TProcedures[TKey], `${TPath}${TKey & string}`>
+    : never;
+};
+
+export type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext> = {
+  useContext(): CreateReactUtilsProxy<TRouter, TSSRContext>;
+  Provider: TRPCProvider<TRouter, TSSRContext>;
+  createClient: CreateClient<TRouter>;
+  useDehydratedState: UseDehydratedState<TRouter>;
+} & DecoratedProcedureRecord<TRouter['_def']['record']>;
+
+/**
+ * @internal
+ */
+export function createHooksInternalProxy<
+  TRouter extends AnyRouter,
+  TSSRContext = unknown,
+>(trpc: CreateReactQueryHooks<TRouter, TSSRContext>) {
+  type CreateHooksInternalProxy = CreateTRPCReact<TRouter, TSSRContext>;
+
+  return createFlatProxy<CreateHooksInternalProxy>((key) => {
+    if (key === 'useContext') {
+      return () => {
+        const context = trpc.useContext();
+        // create a stable reference of the utils context
+        return useMemo(() => {
+          return (createReactQueryUtilsProxy as any)(context as any);
+        }, [context]);
+      };
+    }
+
+    if ((key as string) in trpc) {
+      return (trpc as any)[key];
+    }
+
+    return createReactProxyDecoration(key as string, trpc);
+  });
+}
+
+export function createTRPCReact<
+  TRouter extends AnyRouter,
+  TSSRContext = unknown,
+>(opts?: CreateTRPCReactOptions<TRouter>) {
+  const hooks = createHooksInternal<TRouter, TSSRContext>(opts);
+  const proxy = createHooksInternalProxy<TRouter, TSSRContext>(hooks);
+
+  return proxy;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from '@trpc/client';
+
+export { createTRPCReact, type CreateTRPCReact } from './createTRPCReact';
+export { createReactQueryHooks } from './interop';