@trpc/next 11.0.0-alpha-tmp-export-from-main.213 → 11.0.0-alpha-tmp-export-from-main.217

package/dist/withTRPC.mjs

@@ -0,0 +1,176 @@
+import { dehydrate, QueryClientProvider, HydrationBoundary } from '@tanstack/react-query';
+import { createTRPCUntypedClient } from '@trpc/client';
+import { createRootHooks, getQueryClient } from '@trpc/react-query/shared';
+import React, { createElement, 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;
+    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 hydratedState = trpc.useDehydratedState(trpcClient, props.pageProps?.trpcState);
+            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 (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 = 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'] = trpcClient.runtime.combinedTransformer.output.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;
+            };
+        }
+        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-alpha-tmp-export-from-main.213+855f8bc75",
+  "version": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c",
   "description": "The tRPC Next.js library",
   "author": "KATT",
   "license": "MIT",
@@ -91,12 +91,12 @@
     "!**/*.test.*"
   ],
   "dependencies": {
-    "@trpc/core": "11.0.0-alpha-tmp-export-from-main.213+855f8bc75"
+    "@trpc/core": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-export-from-main.213+855f8bc75",
-    "@trpc/react-query": "11.0.0-alpha-tmp-export-from-main.213+855f8bc75",
+    "@trpc/client": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c",
+    "@trpc/react-query": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@trpc/client": "11.0.0-alpha-tmp-export-from-main.213+855f8bc75",
-    "@trpc/react-query": "11.0.0-alpha-tmp-export-from-main.213+855f8bc75",
+    "@trpc/client": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c",
+    "@trpc/react-query": "11.0.0-alpha-tmp-export-from-main.217+ef6ef3e1c",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.33",
@@ -122,7 +122,7 @@
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.79.1",
+    "rollup": "^4.9.5",
     "tsx": "^4.0.0",
     "zod": "^3.0.0"
   },
@@ -132,5 +132,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "855f8bc75d6f11780eabf92376c6297f9edf6107"
+  "gitHead": "ef6ef3e1c3a4966d30335864d6edf9c94f096717"
 }

package/dist/shared-62d181e7.js

@@ -1,19 +0,0 @@
-import '@trpc/core';
-
-/**
- * @internal
- */
-function generateCacheTag(procedurePath, input) {
-    return input
-        ? `${procedurePath}?input=${JSON.stringify(input)}`
-        : procedurePath;
-}
-function isFormData(value) {
-    if (typeof FormData === 'undefined') {
-        // FormData is not supported
-        return false;
-    }
-    return value instanceof FormData;
-}
-
-export { generateCacheTag as g, isFormData as i };