@trpc/next 11.0.0-alpha-tmp-nosideeffects.257 → 11.0.0-alpha-tmp-02-08-tmp.274

package/dist/withTRPC.d.ts

@@ -1,8 +1,13 @@
-import type { CreateTRPCClientOptions } from '@trpc/client';
+/**
+ * Heavily based on urql's ssr
+ * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
+ */
+import type { QueryClient } from '@tanstack/react-query';
+import type { CreateTRPCClientOptions, TRPCUntypedClient } from '@trpc/client';
 import { type TransformerOptions } from '@trpc/client/unstable-internals';
 import type { TRPCClientError } from '@trpc/react-query';
 import type { CreateTRPCReactOptions, CreateTRPCReactQueryClientConfig } from '@trpc/react-query/shared';
-import type { AnyRouter, inferRootTypes, ResponseMeta } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyRouter, inferClientTypes, ResponseMeta } from '@trpc/server/unstable-core-do-not-import';
 import type { NextComponentType, NextPageContext } from 'next/dist/shared/lib/utils';
 export type WithTRPCConfig<TRouter extends AnyRouter> = CreateTRPCClientOptions<TRouter> & CreateTRPCReactQueryClientConfig & {
     abortOnUnmount?: boolean;
@@ -11,8 +16,17 @@ type WithTRPCOptions<TRouter extends AnyRouter> = CreateTRPCReactOptions<TRouter
     config: (info: {
         ctx?: NextPageContext;
     }) => WithTRPCConfig<TRouter>;
-} & TransformerOptions<inferRootTypes<TRouter>>;
+} & TransformerOptions<inferClientTypes<TRouter>>;
+export type TRPCPrepassHelper = (opts: {
+    parent: WithTRPCSSROptions<AnyRouter>;
+    WithTRPC: NextComponentType<any, any, any>;
+    AppOrPage: NextComponentType<any, any, any>;
+}) => void;
 export type WithTRPCSSROptions<TRouter extends AnyRouter> = WithTRPCOptions<TRouter> & {
+    /**
+     * If you enable this, you also need to add a `ssrPrepass`-prop
+     * @link https://trpc.io/docs/client/nextjs/ssr
+     */
     ssr: true | ((opts: {
         ctx: NextPageContext;
     }) => boolean | Promise<boolean>);
@@ -20,10 +34,22 @@ export type WithTRPCSSROptions<TRouter extends AnyRouter> = WithTRPCOptions<TRou
         ctx: NextPageContext;
         clientErrors: TRPCClientError<TRouter>[];
     }) => ResponseMeta;
+    /**
+     * use `import { ssrPrepass } from '@trpc/next/ssrPrepass'`
+     * @link https://trpc.io/docs/client/nextjs/ssr
+     */
+    ssrPrepass: TRPCPrepassHelper;
 };
 export type WithTRPCNoSSROptions<TRouter extends AnyRouter> = WithTRPCOptions<TRouter> & {
     ssr?: false;
 };
+export type TRPCPrepassProps<TRouter extends AnyRouter, TSSRContext extends NextPageContext = NextPageContext> = {
+    config: WithTRPCConfig<TRouter>;
+    queryClient: QueryClient;
+    trpcClient: TRPCUntypedClient<TRouter>;
+    ssrState: 'prepass';
+    ssrContext: TSSRContext;
+};
 export declare function withTRPC<TRouter extends AnyRouter, TSSRContext extends NextPageContext = NextPageContext>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
 export {};
 //# sourceMappingURL=withTRPC.d.ts.map

package/dist/withTRPC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTRPC.d.ts","sourceRoot":"","sources":["../src/withTRPC.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,cAAc,CAAC;AAG/E,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAuB,MAAM,mBAAmB,CAAC;AAC9E,OAAO,KAAK,EACV,sBAAsB,EACtB,gCAAgC,EACjC,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EACV,SAAS,EAET,cAAc,EAEd,YAAY,EACb,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAGV,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AA0BpC,MAAM,MAAM,cAAc,CAAC,OAAO,SAAS,SAAS,IAClD,uBAAuB,CAAC,OAAO,CAAC,GAC9B,gCAAgC,GAAG;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEN,KAAK,eAAe,CAAC,OAAO,SAAS,SAAS,IAC5C,sBAAsB,CAAC,OAAO,CAAC,GAAG;IAChC,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,CAAC,EAAE,eAAe,CAAA;KAAE,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC;CACtE,GAAG,kBAAkB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;AAElD,MAAM,MAAM,kBAAkB,CAAC,OAAO,SAAS,SAAS,IACtD,eAAe,CAAC,OAAO,CAAC,GAAG;IACzB,GAAG,EACC,IAAI,GACJ,CAAC,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,eAAe,CAAA;KAAE,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,eAAe,CAAC;QACrB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;KAC1C,KAAK,YAAY,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IACxD,eAAe,CAAC,OAAO,CAAC,GAAG;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEJ,wBAAgB,QAAQ,CACtB,OAAO,SAAS,SAAS,EACzB,WAAW,SAAS,eAAe,GAAG,eAAe,EACrD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,eAa9C,kBAAkB,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAG,iBAAiB,CA6MxE"}
+{"version":3,"file":"withTRPC.d.ts","sourceRoot":"","sources":["../src/withTRPC.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAmB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EACV,sBAAsB,EACtB,gCAAgC,EACjC,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACb,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAEV,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAIpC,MAAM,MAAM,cAAc,CAAC,OAAO,SAAS,SAAS,IAClD,uBAAuB,CAAC,OAAO,CAAC,GAC9B,gCAAgC,GAAG;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEN,KAAK,eAAe,CAAC,OAAO,SAAS,SAAS,IAC5C,sBAAsB,CAAC,OAAO,CAAC,GAAG;IAChC,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,CAAC,EAAE,eAAe,CAAA;KAAE,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC;CACtE,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IACrC,MAAM,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,EAAE,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,SAAS,EAAE,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;CAC7C,KAAK,IAAI,CAAC;AACX,MAAM,MAAM,kBAAkB,CAAC,OAAO,SAAS,SAAS,IACtD,eAAe,CAAC,OAAO,CAAC,GAAG;IACzB;;;OAGG;IACH,GAAG,EACC,IAAI,GACJ,CAAC,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,eAAe,CAAA;KAAE,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,eAAe,CAAC;QACrB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;KAC1C,KAAK,YAAY,CAAC;IACnB;;;OAGG;IACH,UAAU,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IACxD,eAAe,CAAC,OAAO,CAAC,GAAG;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEJ,MAAM,MAAM,gBAAgB,CAC1B,OAAO,SAAS,SAAS,EACzB,WAAW,SAAS,eAAe,GAAG,eAAe,IACnD;IACF,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;CACzB,CAAC;AAEF,wBAAgB,QAAQ,CACtB,OAAO,SAAS,SAAS,EACzB,WAAW,SAAS,eAAe,GAAG,eAAe,EACrD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,eAO9C,kBAAkB,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAG,iBAAiB,CAsExE"}

package/dist/withTRPC.js

@@ -1,35 +1,16 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
-var client = require('@trpc/client');
 var unstableInternals = require('@trpc/client/unstable-internals');
 var shared = require('@trpc/react-query/shared');
 var React = require('react');
 
-function transformQueryOrMutationCacheErrors(result) {
-    const error = result.state.error;
-    if (error instanceof Error && error.name === 'TRPCClientError') {
-        const newError = {
-            message: error.message,
-            data: error.data,
-            shape: error.shape
-        };
-        return {
-            ...result,
-            state: {
-                ...result.state,
-                error: newError
-            }
-        };
-    }
-    return result;
-}
 function withTRPC(opts) {
     const { config: getClientConfig  } = opts;
     const transformer = unstableInternals.getTransformer(opts.transformer);
     return (AppOrPage)=>{
         const trpc = shared.createRootHooks(opts);
-        const WithTRPC = /** __@PURE__ */ (props)=>{
+        const WithTRPC = (props)=>{
             const [prepassProps] = React.useState(()=>{
                 if (props.trpc) {
                     return props.trpc;
@@ -70,116 +51,12 @@ function withTRPC(opts) {
                 state: hydratedState
             }, /*#__PURE__*/ React.createElement(AppOrPage, Object.assign({}, props)))));
         };
-        if (AppOrPage.getInitialProps ?? opts.ssr) {
-            WithTRPC.getInitialProps = async (appOrPageCtx)=>{
-                const shouldSsr = async ()=>{
-                    if (typeof opts.ssr === 'function') {
-                        if (typeof window !== 'undefined') {
-                            return false;
-                        }
-                        try {
-                            return await opts.ssr({
-                                ctx: appOrPageCtx.ctx
-                            });
-                        } catch (e) {
-                            return false;
-                        }
-                    }
-                    return opts.ssr;
-                };
-                const ssr = await shouldSsr();
-                const AppTree = appOrPageCtx.AppTree;
-                // Determine if we are wrapping an App component or a Page component.
-                const isApp = !!appOrPageCtx.Component;
-                const ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx;
-                // Run the wrapped component's getInitialProps function.
-                let pageProps = {};
-                if (AppOrPage.getInitialProps) {
-                    const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
-                    const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
-                    pageProps = {
-                        ...originalPageProps,
-                        ...pageProps
-                    };
-                }
-                const getAppTreeProps = (props)=>isApp ? {
-                        pageProps: props
-                    } : props;
-                if (typeof window !== 'undefined' || !ssr) {
-                    return getAppTreeProps(pageProps);
-                }
-                const config = getClientConfig({
-                    ctx
-                });
-                const trpcClient = client.createTRPCUntypedClient(config);
-                const queryClient = shared.getQueryClient(config);
-                const trpcProp = {
-                    config,
-                    trpcClient,
-                    queryClient,
-                    ssrState: 'prepass',
-                    ssrContext: ctx
-                };
-                const prepassProps = {
-                    pageProps,
-                    trpc: trpcProp
-                };
-                const reactDomServer = /** __@PURE__ */ await import('react-dom/server');
-                // Run the prepass step on AppTree. This will run all trpc queries on the server.
-                // multiple prepass ensures that we can do batching on the server
-                while(true){
-                    // render full tree
-                    reactDomServer.renderToString(/*#__PURE__*/ React.createElement(AppTree, prepassProps));
-                    if (!queryClient.isFetching()) {
-                        break;
-                    }
-                    // wait until the query cache has settled it's promises
-                    await new Promise((resolve)=>{
-                        const unsub = queryClient.getQueryCache().subscribe((event)=>{
-                            if (event?.query.getObserversCount() === 0) {
-                                resolve();
-                                unsub();
-                            }
-                        });
-                    });
-                }
-                const dehydratedCache = reactQuery.dehydrate(queryClient, {
-                    shouldDehydrateQuery (query) {
-                        // filter out queries that are marked as trpc: { ssr: false } or are not enabled, but make sure errors are dehydrated
-                        const isExcludedFromSSr = query.state.fetchStatus === 'idle' && query.state.status === 'pending';
-                        return !isExcludedFromSSr;
-                    }
-                });
-                // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
-                const dehydratedCacheWithErrors = {
-                    ...dehydratedCache,
-                    queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
-                    mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
-                };
-                // dehydrate query client's state and add it to the props
-                pageProps['trpcState'] = transformer.input.serialize(dehydratedCacheWithErrors);
-                const appTreeProps = getAppTreeProps(pageProps);
-                if ('responseMeta' in opts) {
-                    const meta = opts.responseMeta?.({
-                        ctx,
-                        clientErrors: [
-                            ...dehydratedCache.queries,
-                            ...dehydratedCache.mutations
-                        ].map((v)=>v.state.error).flatMap((err)=>err instanceof Error && err.name === 'TRPCClientError' ? [
-                                err
-                            ] : [])
-                    }) ?? {};
-                    for (const [key, value] of Object.entries(meta.headers ?? {})){
-                        if (typeof value === 'string') {
-                            ctx.res?.setHeader(key, value);
-                        }
-                    }
-                    if (meta.status && ctx.res) {
-                        ctx.res.statusCode = meta.status;
-                    }
-                }
-                return appTreeProps;
-            };
+        if (opts.ssr) {
+            opts.ssrPrepass({
+                parent: opts,
+                AppOrPage,
+                WithTRPC
+            });
         }
         const displayName = AppOrPage.displayName ?? AppOrPage.name ?? 'Component';
         WithTRPC.displayName = `withTRPC(${displayName})`;

package/dist/withTRPC.mjs

@@ -1,33 +1,14 @@
-import { dehydrate, QueryClientProvider, HydrationBoundary } from '@tanstack/react-query';
-import { createTRPCUntypedClient } from '@trpc/client';
+import { QueryClientProvider, HydrationBoundary } from '@tanstack/react-query';
 import { getTransformer } from '@trpc/client/unstable-internals';
 import { createRootHooks, getQueryClient } from '@trpc/react-query/shared';
-import React, { createElement, useState } from 'react';
+import React, { useState } from 'react';
 
-function transformQueryOrMutationCacheErrors(result) {
-    const error = result.state.error;
-    if (error instanceof Error && error.name === 'TRPCClientError') {
-        const newError = {
-            message: error.message,
-            data: error.data,
-            shape: error.shape
-        };
-        return {
-            ...result,
-            state: {
-                ...result.state,
-                error: newError
-            }
-        };
-    }
-    return result;
-}
 function withTRPC(opts) {
     const { config: getClientConfig  } = opts;
     const transformer = getTransformer(opts.transformer);
     return (AppOrPage)=>{
         const trpc = createRootHooks(opts);
-        const WithTRPC = /** __@PURE__ */ (props)=>{
+        const WithTRPC = (props)=>{
             const [prepassProps] = useState(()=>{
                 if (props.trpc) {
                     return props.trpc;
@@ -68,116 +49,12 @@ function withTRPC(opts) {
                 state: hydratedState
             }, /*#__PURE__*/ React.createElement(AppOrPage, Object.assign({}, props)))));
         };
-        if (AppOrPage.getInitialProps ?? opts.ssr) {
-            WithTRPC.getInitialProps = async (appOrPageCtx)=>{
-                const shouldSsr = async ()=>{
-                    if (typeof opts.ssr === 'function') {
-                        if (typeof window !== 'undefined') {
-                            return false;
-                        }
-                        try {
-                            return await opts.ssr({
-                                ctx: appOrPageCtx.ctx
-                            });
-                        } catch (e) {
-                            return false;
-                        }
-                    }
-                    return opts.ssr;
-                };
-                const ssr = await shouldSsr();
-                const AppTree = appOrPageCtx.AppTree;
-                // Determine if we are wrapping an App component or a Page component.
-                const isApp = !!appOrPageCtx.Component;
-                const ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx;
-                // Run the wrapped component's getInitialProps function.
-                let pageProps = {};
-                if (AppOrPage.getInitialProps) {
-                    const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
-                    const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
-                    pageProps = {
-                        ...originalPageProps,
-                        ...pageProps
-                    };
-                }
-                const getAppTreeProps = (props)=>isApp ? {
-                        pageProps: props
-                    } : props;
-                if (typeof window !== 'undefined' || !ssr) {
-                    return getAppTreeProps(pageProps);
-                }
-                const config = getClientConfig({
-                    ctx
-                });
-                const trpcClient = createTRPCUntypedClient(config);
-                const queryClient = getQueryClient(config);
-                const trpcProp = {
-                    config,
-                    trpcClient,
-                    queryClient,
-                    ssrState: 'prepass',
-                    ssrContext: ctx
-                };
-                const prepassProps = {
-                    pageProps,
-                    trpc: trpcProp
-                };
-                const reactDomServer = /** __@PURE__ */ await import('react-dom/server');
-                // Run the prepass step on AppTree. This will run all trpc queries on the server.
-                // multiple prepass ensures that we can do batching on the server
-                while(true){
-                    // render full tree
-                    reactDomServer.renderToString(/*#__PURE__*/ createElement(AppTree, prepassProps));
-                    if (!queryClient.isFetching()) {
-                        break;
-                    }
-                    // wait until the query cache has settled it's promises
-                    await new Promise((resolve)=>{
-                        const unsub = queryClient.getQueryCache().subscribe((event)=>{
-                            if (event?.query.getObserversCount() === 0) {
-                                resolve();
-                                unsub();
-                            }
-                        });
-                    });
-                }
-                const dehydratedCache = dehydrate(queryClient, {
-                    shouldDehydrateQuery (query) {
-                        // filter out queries that are marked as trpc: { ssr: false } or are not enabled, but make sure errors are dehydrated
-                        const isExcludedFromSSr = query.state.fetchStatus === 'idle' && query.state.status === 'pending';
-                        return !isExcludedFromSSr;
-                    }
-                });
-                // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
-                const dehydratedCacheWithErrors = {
-                    ...dehydratedCache,
-                    queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
-                    mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
-                };
-                // dehydrate query client's state and add it to the props
-                pageProps['trpcState'] = transformer.input.serialize(dehydratedCacheWithErrors);
-                const appTreeProps = getAppTreeProps(pageProps);
-                if ('responseMeta' in opts) {
-                    const meta = opts.responseMeta?.({
-                        ctx,
-                        clientErrors: [
-                            ...dehydratedCache.queries,
-                            ...dehydratedCache.mutations
-                        ].map((v)=>v.state.error).flatMap((err)=>err instanceof Error && err.name === 'TRPCClientError' ? [
-                                err
-                            ] : [])
-                    }) ?? {};
-                    for (const [key, value] of Object.entries(meta.headers ?? {})){
-                        if (typeof value === 'string') {
-                            ctx.res?.setHeader(key, value);
-                        }
-                    }
-                    if (meta.status && ctx.res) {
-                        ctx.res.statusCode = meta.status;
-                    }
-                }
-                return appTreeProps;
-            };
+        if (opts.ssr) {
+            opts.ssrPrepass({
+                parent: opts,
+                AppOrPage,
+                WithTRPC
+            });
         }
         const displayName = AppOrPage.displayName ?? AppOrPage.name ?? 'Component';
         WithTRPC.displayName = `withTRPC(${displayName})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/next",
-  "version": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
+  "version": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
   "description": "The tRPC Next.js library",
   "author": "KATT",
   "license": "MIT",
@@ -55,6 +55,11 @@
       "import": "./dist/app-dir/server.mjs",
       "require": "./dist/app-dir/server.js",
       "default": "./dist/app-dir/server.js"
+    },
+    "./ssrPrepass": {
+      "import": "./dist/ssrPrepass.mjs",
+      "require": "./dist/ssrPrepass.js",
+      "default": "./dist/ssrPrepass.js"
     }
   },
   "files": [
@@ -63,13 +68,14 @@
     "README.md",
     "package.json",
     "app-dir",
+    "ssrPrepass",
     "!**/*.test.*"
   ],
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
-    "@trpc/react-query": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
-    "@trpc/server": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
+    "@trpc/client": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
+    "@trpc/react-query": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
+    "@trpc/server": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
@@ -84,9 +90,9 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
-    "@trpc/react-query": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
-    "@trpc/server": "11.0.0-alpha-tmp-nosideeffects.257+d4a143f03",
+    "@trpc/client": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
+    "@trpc/react-query": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
+    "@trpc/server": "11.0.0-alpha-tmp-02-08-tmp.274+fc6e807b1",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.33",
@@ -106,5 +112,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "d4a143f039d39e3cd2623797c7e797a58a8f7066"
+  "gitHead": "fc6e807b19d0b6fc726daa0a58ff5fcefcbef3d2"
 }

package/src/app-dir/create-action-hook.tsx

@@ -11,8 +11,8 @@ import type {
 import { getTransformer } from '@trpc/client/unstable-internals';
 import { observable } from '@trpc/server/observable';
 import type {
+  inferClientTypes,
   InferrableClientTypes,
-  inferRootTypes,
   MaybePromise,
   ProcedureOptions,
   Simplify,
@@ -80,7 +80,7 @@ export function experimental_serverActionLink<
     ? [
         TypeError<'Generic parameter missing in `experimental_createActionHook<HERE>()` or experimental_serverActionLink<HERE>()'>,
       ]
-    : inferRootTypes<TInferrable>['transformer'] extends true
+    : inferClientTypes<TInferrable>['transformer'] extends true
     ? [
         opts: TransformerOptions<{
           transformer: true;

package/src/app-dir/links/nextCache.ts

@@ -9,7 +9,7 @@ import {
 import { observable } from '@trpc/server/observable';
 import type {
   AnyRouter,
-  inferRootTypes,
+  inferClientTypes,
   inferRouterContext,
 } from '@trpc/server/unstable-core-do-not-import';
 import { callProcedure } from '@trpc/server/unstable-core-do-not-import';
@@ -21,7 +21,7 @@ type NextCacheLinkOptions<TRouter extends AnyRouter> = {
   createContext: () => Promise<inferRouterContext<TRouter>>;
   /** how many seconds the cache should hold before revalidating */
   revalidate?: number | false;
-} & TransformerOptions<inferRootTypes<TRouter>>;
+} & TransformerOptions<inferClientTypes<TRouter>>;
 
 // ts-prune-ignore-next
 export function experimental_nextCacheLink<TRouter extends AnyRouter>(

package/src/app-dir/server.ts

@@ -7,8 +7,8 @@ import type {
   AnyProcedure,
   AnyRootTypes,
   AnyRouter,
+  inferClientTypes,
   inferProcedureInput,
-  inferRootTypes,
   MaybePromise,
   RootConfig,
   Simplify,
@@ -95,7 +95,7 @@ export function experimental_createServerActionHandler<
   return function createServerAction<TProc extends AnyProcedure>(
     proc: TProc,
   ): TRPCActionHandler<
-    Simplify<inferActionDef<inferRootTypes<TInstance>, TProc>>
+    Simplify<inferActionDef<inferClientTypes<TInstance>, TProc>>
   > {
     return async function actionHandler(
       rawInput: FormData | inferProcedureInput<TProc>,

package/src/app-dir/shared.ts

@@ -4,12 +4,13 @@ import type {
   TRPCUntypedClient,
 } from '@trpc/client';
 import type {
-  AnyClientRootTypes,
+  AnyClientTypes,
   AnyProcedure,
   AnyQueryProcedure,
   AnyRootTypes,
   AnyRouter,
   inferProcedureInput,
+  inferTransformedProcedureOutput,
   ProtectedIntersection,
   RouterRecord,
 } from '@trpc/server/unstable-core-do-not-import';
@@ -26,7 +27,12 @@ export type UseProcedureRecord<
     ? $Value extends RouterRecord
       ? UseProcedureRecord<TRoot, $Value>
       : $Value extends AnyQueryProcedure
-      ? Resolver<TRoot, $Value>
+      ? Resolver<{
+          input: inferProcedureInput<$Value>;
+          output: inferTransformedProcedureOutput<TRoot, $Value>;
+          errorShape: TRoot['errorShape'];
+          transformer: TRoot['transformer'];
+        }>
       : never
     : never;
 };
@@ -114,7 +120,7 @@ export interface ActionHandlerDef {
  * @internal
  */
 export type inferActionDef<
-  TRoot extends AnyClientRootTypes,
+  TRoot extends AnyClientTypes,
   TProc extends AnyProcedure,
 > = {
   input: inferProcedureInput<TProc>;

package/src/app-dir/types.ts

@@ -1,33 +1,39 @@
 import type { Resolver } from '@trpc/client';
 import type {
-  AnyMutationProcedure,
   AnyProcedure,
-  AnyQueryProcedure,
   AnyRootTypes,
-  AnySubscriptionProcedure,
   inferProcedureInput,
+  inferTransformedProcedureOutput,
+  ProcedureType,
   RouterRecord,
 } from '@trpc/server/unstable-core-do-not-import';
 
+type ResolverDef = {
+  input: any;
+  output: any;
+  transformer: boolean;
+  errorShape: any;
+};
+
 export type DecorateProcedureServer<
-  TRoot extends AnyRootTypes,
-  TProcedure extends AnyProcedure,
-> = TProcedure extends AnyQueryProcedure
+  TType extends ProcedureType,
+  TDef extends ResolverDef,
+> = TType extends 'query'
   ? {
-      query: Resolver<TRoot, TProcedure>;
+      query: Resolver<TDef>;
       revalidate: (
-        input?: inferProcedureInput<TProcedure>,
+        input?: TDef['input'],
       ) => Promise<
         { revalidated: false; error: string } | { revalidated: true }
       >;
     }
-  : TProcedure extends AnyMutationProcedure
+  : TType extends 'mutation'
   ? {
-      mutate: Resolver<TRoot, TProcedure>;
+      mutate: Resolver<TDef>;
     }
-  : TProcedure extends AnySubscriptionProcedure
+  : TType extends 'subscription'
   ? {
-      subscribe: Resolver<TRoot, TProcedure>;
+      subscribe: Resolver<TDef>;
     }
   : never;
 
@@ -39,7 +45,15 @@ export type NextAppDirDecorateRouterRecord<
     ? $Value extends RouterRecord
       ? NextAppDirDecorateRouterRecord<TRoot, $Value>
       : $Value extends AnyProcedure
-      ? DecorateProcedureServer<TRoot, $Value>
+      ? DecorateProcedureServer<
+          $Value['_def']['type'],
+          {
+            input: inferProcedureInput<$Value>;
+            output: inferTransformedProcedureOutput<TRoot, $Value>;
+            errorShape: TRoot['errorShape'];
+            transformer: TRoot['transformer'];
+          }
+        >
       : never
     : never;
 };

package/src/createTRPCNext.tsx

@@ -49,23 +49,20 @@ export interface CreateTRPCNextBase<
 export type CreateTRPCNext<
   TRouter extends AnyRouter,
   TSSRContext extends NextPageContext,
-  TFlags,
 > = ProtectedIntersection<
   CreateTRPCNextBase<TRouter, TSSRContext>,
   DecorateRouterRecord<
     TRouter['_def']['_config']['$types'],
-    TRouter['_def']['record'],
-    TFlags
+    TRouter['_def']['record']
   >
 >;
 
 export function createTRPCNext<
   TRouter extends AnyRouter,
   TSSRContext extends NextPageContext = NextPageContext,
-  TFlags = null,
 >(
   opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
-): CreateTRPCNext<TRouter, TSSRContext, TFlags> {
+): CreateTRPCNext<TRouter, TSSRContext> {
   const hooks = createRootHooks<TRouter, TSSRContext>(opts);
 
   // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`