@trpc/next 11.0.0-next.91 → 11.0.0-rc.329

package/dist/withTRPC.mjs

@@ -0,0 +1,84 @@
+import { QueryClientProvider, HydrationBoundary } from '@tanstack/react-query';
+import { getTransformer } from '@trpc/client/unstable-internals';
+import { createRootHooks, getQueryClient } from '@trpc/react-query/shared';
+import React, { useState } from 'react';
+
+function withTRPC(opts) {
+    const { config: getClientConfig  } = opts;
+    const transformer = getTransformer(opts.transformer);
+    return (AppOrPage)=>{
+        const trpc = createRootHooks(opts);
+        const WithTRPC = (props)=>{
+            const [prepassProps] = useState(()=>{
+                if (props.trpc) {
+                    return props.trpc;
+                }
+                const config = getClientConfig({});
+                const queryClient = getQueryClient(config);
+                const trpcClient = trpc.createClient(config);
+                return {
+                    abortOnUnmount: config.abortOnUnmount,
+                    queryClient,
+                    trpcClient,
+                    ssrState: opts.ssr ? 'mounting' : false,
+                    ssrContext: null
+                };
+            });
+            const { queryClient , trpcClient , ssrState , ssrContext  } = prepassProps;
+            // allow normal components to be wrapped, not just app/pages
+            const trpcState = props.pageProps?.trpcState;
+            const hydratedState = React.useMemo(()=>{
+                if (!trpcState) {
+                    return trpcState;
+                }
+                return transformer.input.deserialize(trpcState);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, [
+                trpcState,
+                trpcClient
+            ]);
+            return /*#__PURE__*/ React.createElement(trpc.Provider, {
+                abortOnUnmount: prepassProps.abortOnUnmount ?? false,
+                client: trpcClient,
+                queryClient: queryClient,
+                ssrState: ssrState,
+                ssrContext: ssrContext
+            }, /*#__PURE__*/ React.createElement(QueryClientProvider, {
+                client: queryClient
+            }, /*#__PURE__*/ React.createElement(HydrationBoundary, {
+                state: hydratedState
+            }, /*#__PURE__*/ React.createElement(AppOrPage, Object.assign({}, props)))));
+        };
+        if (opts.ssr) {
+            opts.ssrPrepass({
+                parent: opts,
+                AppOrPage,
+                WithTRPC
+            });
+        } else if (AppOrPage.getInitialProps) {
+            // Allow combining `getServerSideProps` and `getInitialProps`
+            WithTRPC.getInitialProps = async (appOrPageCtx)=>{
+                // Determine if we are wrapping an App component or a Page component.
+                const isApp = !!appOrPageCtx.Component;
+                // Run the wrapped component's getInitialProps function.
+                let pageProps = {};
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
+                const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
+                pageProps = {
+                    ...originalPageProps,
+                    ...pageProps
+                };
+                const getAppTreeProps = (props)=>isApp ? {
+                        pageProps: props
+                    } : props;
+                return getAppTreeProps(pageProps);
+            };
+        }
+        const displayName = AppOrPage.displayName ?? AppOrPage.name ?? 'Component';
+        WithTRPC.displayName = `withTRPC(${displayName})`;
+        return WithTRPC;
+    };
+}
+
+export { withTRPC };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/next",
-  "version": "11.0.0-next.91+ca021e61",
+  "version": "11.0.0-rc.329+fdcb4a7d8",
   "description": "The tRPC Next.js library",
   "author": "KATT",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "dev": "pnpm build --watch",
     "codegen-entrypoints": "tsx entrypoints.script.ts",
     "ts-watch": "tsc --project tsconfig.watch.json --watch",
-    "lint": "eslint --cache --ext \".js,.ts,.tsx\" --ignore-path ../../.gitignore --report-unused-disable-directives src"
+    "lint": "eslint --cache --ext \".js,.ts,.tsx\" --ignore-path ../../.gitignore src"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -36,11 +36,6 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./app-dir/server": {
-      "import": "./dist/app-dir/server.mjs",
-      "require": "./dist/app-dir/server.js",
-      "default": "./dist/app-dir/server.js"
-    },
     "./app-dir/client": {
       "import": "./dist/app-dir/client.mjs",
       "require": "./dist/app-dir/client.js",
@@ -55,6 +50,16 @@
       "import": "./dist/app-dir/links/nextHttp.mjs",
       "require": "./dist/app-dir/links/nextHttp.js",
       "default": "./dist/app-dir/links/nextHttp.js"
+    },
+    "./app-dir/server": {
+      "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,36 +68,42 @@
     "README.md",
     "package.json",
     "app-dir",
+    "ssrPrepass",
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-next.91+ca021e61",
-    "@trpc/react-query": "11.0.0-next.91+ca021e61",
-    "@trpc/server": "11.0.0-next.91+ca021e61",
+    "@tanstack/react-query": "^5.25.0",
+    "@trpc/client": "11.0.0-rc.329+fdcb4a7d8",
+    "@trpc/react-query": "11.0.0-rc.329+fdcb4a7d8",
+    "@trpc/server": "11.0.0-rc.329+fdcb4a7d8",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "dependencies": {
-    "react-ssr-prepass": "^1.5.0"
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@trpc/react-query": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-next.91+ca021e61",
-    "@trpc/react-query": "11.0.0-next.91+ca021e61",
-    "@trpc/server": "11.0.0-next.91+ca021e61",
+    "@tanstack/react-query": "^5.25.0",
+    "@trpc/client": "11.0.0-rc.329+fdcb4a7d8",
+    "@trpc/react-query": "11.0.0-rc.329+fdcb4a7d8",
+    "@trpc/server": "11.0.0-rc.329+fdcb4a7d8",
     "@types/express": "^4.17.17",
-    "@types/node": "^18.16.16",
-    "@types/react": "^18.2.8",
-    "@types/react-dom": "^18.2.4",
-    "eslint": "^8.40.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^8.56.0",
     "express": "^4.17.1",
-    "next": "^13.4.8",
+    "next": "^14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.79.1",
-    "tsx": "^3.12.7",
+    "rollup": "^4.9.5",
+    "tsx": "^4.0.0",
     "zod": "^3.0.0"
   },
   "publishConfig": {
@@ -101,5 +112,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "ca021e61ba8e6eb6e1715f124489cda75a00b5aa"
+  "gitHead": "fdcb4a7d8168d19f9bcbc816b80db815b06a134c"
 }

package/src/app-dir/client.ts

@@ -1,11 +1,11 @@
+import type { CreateTRPCClient } from '@trpc/client';
 import {
   clientCallTypeToProcedureType,
-  CreateTRPCClient,
   createTRPCUntypedClient,
 } from '@trpc/client';
-import { AnyRouter } from '@trpc/server';
-import { createRecursiveProxy } from '@trpc/server/shared';
-import { CreateTRPCNextAppRouterOptions } from './shared';
+import type { AnyRouter } from '@trpc/server/unstable-core-do-not-import';
+import { createRecursiveProxy } from '@trpc/server/unstable-core-do-not-import';
+import type { CreateTRPCNextAppRouterOptions } from './shared';
 
 export {
   // ts-prune-ignore-next

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

@@ -1,21 +1,28 @@
-import {
+import type {
   CreateTRPCClientOptions,
-  createTRPCUntypedClient,
-  TRPCClientError,
   TRPCLink,
   TRPCRequestOptions,
 } from '@trpc/client';
-import { transformResult } from '@trpc/client/shared';
-import {
-  AnyRouter,
+import { createTRPCUntypedClient, TRPCClientError } from '@trpc/client';
+import type {
+  CoercedTransformerParameters,
+  TransformerOptions,
+} from '@trpc/client/unstable-internals';
+import { getTransformer } from '@trpc/client/unstable-internals';
+import { observable } from '@trpc/server/observable';
+import type {
+  inferClientTypes,
+  InferrableClientTypes,
   MaybePromise,
   ProcedureOptions,
   Simplify,
-} from '@trpc/server';
-import { observable } from '@trpc/server/observable';
+  TypeError,
+} from '@trpc/server/unstable-core-do-not-import';
+import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { TRPCActionHandler } from './server';
-import { ActionHandlerDef, isFormData } from './shared';
+import type { TRPCActionHandler } from './server';
+import type { ActionHandlerDef } from './shared';
+import { isFormData } from './shared';
 
 type MutationArgs<TDef extends ActionHandlerDef> = TDef['input'] extends void
   ? [input?: undefined | void, opts?: ProcedureOptions]
@@ -67,9 +74,27 @@ type ActionContext = {
 
 // ts-prune-ignore-next
 export function experimental_serverActionLink<
-  TRouter extends AnyRouter = AnyRouter,
->(): TRPCLink<TRouter> {
-  return (runtime) =>
+  TInferrable extends InferrableClientTypes,
+>(
+  ...args: InferrableClientTypes extends TInferrable
+    ? [
+        TypeError<'Generic parameter missing in `experimental_createActionHook<HERE>()` or experimental_serverActionLink<HERE>()'>,
+      ]
+    : inferClientTypes<TInferrable>['transformer'] extends true
+    ? [
+        opts: TransformerOptions<{
+          transformer: true;
+        }>,
+      ]
+    : [
+        opts?: TransformerOptions<{
+          transformer: false;
+        }>,
+      ]
+): TRPCLink<TInferrable> {
+  const [opts] = args as [CoercedTransformerParameters];
+  const transformer = getTransformer(opts?.transformer);
+  return () =>
     ({ op }) =>
       observable((observer) => {
         const context = op.context as ActionContext;
@@ -78,10 +103,10 @@ export function experimental_serverActionLink<
           ._action(
             isFormData(op.input)
               ? op.input
-              : runtime.transformer.serialize(op.input),
+              : transformer.input.serialize(op.input),
           )
           .then((data) => {
-            const transformed = transformResult(data, runtime);
+            const transformed = transformResult(data, transformer.output);
 
             if (!transformed.ok) {
               observer.error(TRPCClientError.from(transformed.error, {}));
@@ -103,15 +128,20 @@ interface UseTRPCActionOptions<TDef extends ActionHandlerDef> {
   onSuccess?: (result: TDef['output']) => MaybePromise<void> | void;
   onError?: (result: TRPCClientError<TDef['errorShape']>) => MaybePromise<void>;
 }
-
 // ts-prune-ignore-next
-export function experimental_createActionHook<TRouter extends AnyRouter>(
-  opts: CreateTRPCClientOptions<TRouter>,
+export function experimental_createActionHook<
+  TInferrable extends InferrableClientTypes,
+>(
+  opts: InferrableClientTypes extends TInferrable
+    ? TypeError<'Generic parameter missing in `experimental_createActionHook<HERE>()`'>
+    : CreateTRPCClientOptions<TInferrable>,
 ) {
   type ActionContext = {
     _action: (...args: any[]) => Promise<any>;
   };
-  const client = createTRPCUntypedClient(opts);
+  const client = createTRPCUntypedClient(
+    opts as Exclude<typeof opts, TypeError<any>>,
+  );
   return function useAction<TDef extends ActionHandlerDef>(
     handler: TRPCActionHandler<TDef>,
     useActionOpts?: UseTRPCActionOptions<Simplify<TDef>>,

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

@@ -1,8 +1,18 @@
 // import "server-only";
 
-import { TRPCClientError, TRPCLink } from '@trpc/client';
-import { AnyRouter, callProcedure, inferRouterContext } from '@trpc/server';
+import type { TRPCLink } from '@trpc/client';
+import { TRPCClientError } from '@trpc/client';
+import {
+  getTransformer,
+  type TransformerOptions,
+} from '@trpc/client/unstable-internals';
 import { observable } from '@trpc/server/observable';
+import type {
+  AnyRouter,
+  inferClientTypes,
+  inferRouterContext,
+} from '@trpc/server/unstable-core-do-not-import';
+import { callProcedure } from '@trpc/server/unstable-core-do-not-import';
 import { unstable_cache } from 'next/cache';
 import { generateCacheTag } from '../shared';
 
@@ -11,13 +21,14 @@ type NextCacheLinkOptions<TRouter extends AnyRouter> = {
   createContext: () => Promise<inferRouterContext<TRouter>>;
   /** how many seconds the cache should hold before revalidating */
   revalidate?: number | false;
-};
+} & TransformerOptions<inferClientTypes<TRouter>>;
 
 // ts-prune-ignore-next
 export function experimental_nextCacheLink<TRouter extends AnyRouter>(
   opts: NextCacheLinkOptions<TRouter>,
 ): TRPCLink<TRouter> {
-  return (runtime) =>
+  const transformer = getTransformer(opts.transformer);
+  return () =>
     ({ op }) =>
       observable((observer) => {
         const { path, input, type, context } = op;
@@ -25,8 +36,9 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
         const cacheTag = generateCacheTag(path, input);
         // Let per-request revalidate override global revalidate
         const requestRevalidate =
-          typeof context.revalidate === 'number' || context.revalidate === false
-            ? context.revalidate
+          typeof context['revalidate'] === 'number' ||
+          context['revalidate'] === false
+            ? context['revalidate']
             : undefined;
         const revalidate = requestRevalidate ?? opts.revalidate ?? false;
 
@@ -46,7 +58,7 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
               });
 
               // We need to serialize cause the cache only accepts JSON
-              return runtime.transformer.serialize(procedureResult);
+              return transformer.input.serialize(procedureResult);
             };
 
             if (type === 'query') {
@@ -64,7 +76,7 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
 
         promise
           .then((data) => {
-            const transformedResult = runtime.transformer.deserialize(data);
+            const transformedResult = transformer.output.deserialize(data);
             observer.next({ result: { data: transformedResult } });
             observer.complete();
           })

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

@@ -1,25 +1,36 @@
-import {
-  httpBatchLink,
+import type {
   HTTPBatchLinkOptions,
-  httpLink,
   HTTPLinkOptions,
   TRPCLink,
 } from '@trpc/client';
-import { AnyRouter } from '@trpc/server';
+import { httpBatchLink, httpLink } from '@trpc/client';
+import type {
+  AnyRootTypes,
+  AnyRouter,
+} from '@trpc/server/unstable-core-do-not-import';
 import { generateCacheTag } from '../shared';
 
-type NextFetchLinkOptions<TBatch extends boolean> = (TBatch extends true
-  ? HTTPBatchLinkOptions
-  : HTTPLinkOptions) & {
-  batch?: TBatch;
+interface NextLinkBaseOptions {
   revalidate?: number | false;
-};
+  batch?: boolean;
+}
+
+type NextLinkSingleOptions<TRoot extends AnyRootTypes> = NextLinkBaseOptions &
+  Omit<HTTPLinkOptions<TRoot>, 'fetch'> & {
+    batch?: false;
+  };
+
+type NextLinkBatchOptions<TRoot extends AnyRootTypes> = NextLinkBaseOptions &
+  Omit<HTTPBatchLinkOptions<TRoot>, 'fetch'> & {
+    batch: true;
+  };
 
 // ts-prune-ignore-next
-export function experimental_nextHttpLink<
-  TRouter extends AnyRouter,
-  TBatch extends boolean,
->(opts: NextFetchLinkOptions<TBatch>): TRPCLink<TRouter> {
+export function experimental_nextHttpLink<TRouter extends AnyRouter>(
+  opts:
+    | NextLinkSingleOptions<TRouter['_def']['_config']['$types']>
+    | NextLinkBatchOptions<TRouter['_def']['_config']['$types']>,
+): TRPCLink<TRouter> {
   return (runtime) => {
     return (ctx) => {
       const { path, input, context } = ctx.op;
@@ -27,28 +38,37 @@ export function experimental_nextHttpLink<
 
       // Let per-request revalidate override global revalidate
       const requestRevalidate =
-        typeof context.revalidate === 'number' || context.revalidate === false
-          ? context.revalidate
+        typeof context['revalidate'] === 'number' ||
+        context['revalidate'] === false
+          ? context['revalidate']
           : undefined;
+
       const revalidate = requestRevalidate ?? opts.revalidate ?? false;
 
-      const linkFactory = opts.batch ? httpBatchLink : httpLink;
-      const link = linkFactory({
-        headers: opts.headers as any,
-        url: opts.url,
-        fetch: (url, fetchOpts) => {
-          return fetch(url, {
-            ...fetchOpts,
-            // cache: 'no-cache',
-            next: {
-              revalidate,
-              tags: [cacheTag],
-            },
+      const _fetch: NonNullable<HTTPLinkOptions<AnyRootTypes>['fetch']> = (
+        url,
+        fetchOpts,
+      ) => {
+        return fetch(url, {
+          ...fetchOpts,
+          // cache: 'no-cache',
+          next: {
+            revalidate,
+            tags: [cacheTag],
+          },
+        });
+      };
+      const link = opts.batch
+        ? httpBatchLink({
+            ...(opts as any),
+            fetch: _fetch,
+          })
+        : httpLink({
+            ...(opts as any),
+            fetch: _fetch,
           });
-        },
-      })(runtime);
 
-      return link(ctx);
+      return link(runtime)(ctx);
     };
   };
 }