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

package/src/withTRPC.tsx

@@ -2,102 +2,103 @@
  * Heavily based on urql's ssr
  * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
  */
+import type { DehydratedState, QueryClient } from '@tanstack/react-query';
+import { HydrationBoundary, QueryClientProvider } from '@tanstack/react-query';
+import type { CreateTRPCClientOptions, TRPCUntypedClient } from '@trpc/client';
+import type { CoercedTransformerParameters } from '@trpc/client/unstable-internals';
 import {
-  dehydrate,
-  DehydratedState,
-  HydrationBoundary,
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query';
-import {
-  CreateTRPCClientOptions,
-  createTRPCUntypedClient,
-  TRPCUntypedClient,
-} from '@trpc/client';
-import { TRPCClientError, TRPCClientErrorLike } from '@trpc/react-query';
-import {
-  createRootHooks,
+  getTransformer,
+  type TransformerOptions,
+} from '@trpc/client/unstable-internals';
+import type { TRPCClientError } from '@trpc/react-query';
+import type {
   CreateTRPCReactOptions,
   CreateTRPCReactQueryClientConfig,
-  getQueryClient,
 } from '@trpc/react-query/shared';
-import type { AnyRouter, Dict, Maybe } from '@trpc/server';
-import type { ResponseMeta } from '@trpc/server/http';
-import {
+import { createRootHooks, getQueryClient } from '@trpc/react-query/shared';
+import type {
+  AnyRouter,
+  Dict,
+  inferClientTypes,
+  ResponseMeta,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
   AppContextType,
   AppPropsType,
   NextComponentType,
   NextPageContext,
 } from 'next/dist/shared/lib/utils';
-import { NextRouter } from 'next/router';
-import React, { createElement, useState } from 'react';
-import ssrPrepass from 'react-ssr-prepass';
+import type { NextRouter } from 'next/router';
+import React, { useState } from 'react';
 
-function transformQueryOrMutationCacheErrors<
-  TState extends
-    | DehydratedState['mutations'][0]
-    | DehydratedState['queries'][0],
->(result: TState): TState {
-  const error = result.state.error as Maybe<TRPCClientError<any>>;
-  if (error instanceof Error && error.name === 'TRPCClientError') {
-    const newError: TRPCClientErrorLike<any> = {
-      message: error.message,
-      data: error.data,
-      shape: error.shape,
-    };
-    return {
-      ...result,
-      state: {
-        ...result.state,
-        error: newError,
-      },
-    };
-  }
-  return result;
-}
 export type WithTRPCConfig<TRouter extends AnyRouter> =
   CreateTRPCClientOptions<TRouter> &
     CreateTRPCReactQueryClientConfig & {
       abortOnUnmount?: boolean;
     };
 
-interface WithTRPCOptions<TRouter extends AnyRouter>
-  extends CreateTRPCReactOptions<TRouter> {
-  config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<TRouter>;
-}
+type WithTRPCOptions<TRouter extends AnyRouter> =
+  CreateTRPCReactOptions<TRouter> & {
+    config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<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>);
+    responseMeta?: (opts: {
+      ctx: NextPageContext;
+      clientErrors: TRPCClientError<TRouter>[];
+    }) => ResponseMeta;
+    /**
+     * use `import { ssrPrepass } from '@trpc/next/ssrPrepass'`
+     * @link https://trpc.io/docs/client/nextjs/ssr
+     */
+    ssrPrepass: TRPCPrepassHelper;
+  };
 
-export interface WithTRPCSSROptions<TRouter extends AnyRouter>
-  extends WithTRPCOptions<TRouter> {
-  ssr: true;
-  responseMeta?: (opts: {
-    ctx: NextPageContext;
-    clientErrors: TRPCClientError<TRouter>[];
-  }) => ResponseMeta;
-}
-export interface WithTRPCNoSSROptions<TRouter extends AnyRouter>
-  extends WithTRPCOptions<TRouter> {
-  ssr?: false;
-}
+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 function withTRPC<
   TRouter extends AnyRouter,
   TSSRContext extends NextPageContext = NextPageContext,
 >(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
   const { config: getClientConfig } = opts;
+  const transformer = getTransformer(
+    (opts as CoercedTransformerParameters).transformer,
+  );
 
-  type TRPCPrepassProps = {
-    config: WithTRPCConfig<TRouter>;
-    queryClient: QueryClient;
-    trpcClient: TRPCUntypedClient<TRouter>;
-    ssrState: 'prepass';
-    ssrContext: TSSRContext;
-  };
+  type $PrepassProps = TRPCPrepassProps<TRouter, TSSRContext>;
   return (AppOrPage: NextComponentType<any, any, any>): NextComponentType => {
     const trpc = createRootHooks<TRouter, TSSRContext>(opts);
 
     const WithTRPC = (
       props: AppPropsType<NextRouter, any> & {
-        trpc?: TRPCPrepassProps;
+        trpc?: $PrepassProps;
       },
     ) => {
       const [prepassProps] = useState(() => {
@@ -108,6 +109,7 @@ export function withTRPC<
         const config = getClientConfig({});
         const queryClient = getQueryClient(config);
         const trpcClient = trpc.createClient(config);
+
         return {
           abortOnUnmount: config.abortOnUnmount,
           queryClient,
@@ -120,10 +122,16 @@ export function withTRPC<
       const { queryClient, trpcClient, ssrState, ssrContext } = prepassProps;
 
       // allow normal components to be wrapped, not just app/pages
-      const hydratedState = trpc.useDehydratedState(
-        trpcClient,
-        props.pageProps?.trpcState,
-      );
+      const trpcState = props.pageProps?.trpcState;
+
+      const hydratedState: DehydratedState | undefined = React.useMemo(() => {
+        if (!trpcState) {
+          return trpcState;
+        }
+
+        return transformer.input.deserialize(trpcState);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [trpcState, trpcClient]);
 
       return (
         <trpc.Provider
@@ -142,123 +150,37 @@ export function withTRPC<
       );
     };
 
-    if (AppOrPage.getInitialProps ?? opts.ssr) {
-      WithTRPC.getInitialProps = async (appOrPageCtx: AppContextType) => {
-        const AppTree = appOrPageCtx.AppTree;
+    if (opts.ssr) {
+      opts.ssrPrepass({
+        parent: opts,
+        AppOrPage,
+        WithTRPC,
+      });
+    } else if (AppOrPage.getInitialProps) {
+      // Allow combining `getServerSideProps` and `getInitialProps`
 
+      WithTRPC.getInitialProps = async (appOrPageCtx: AppContextType) => {
         // Determine if we are wrapping an App component or a Page component.
         const isApp = !!appOrPageCtx.Component;
-        const ctx: NextPageContext = isApp
-          ? appOrPageCtx.ctx
-          : (appOrPageCtx as any as NextPageContext);
 
         // Run the wrapped component's getInitialProps function.
         let pageProps: Dict<unknown> = {};
-        if (AppOrPage.getInitialProps) {
-          const originalProps = await AppOrPage.getInitialProps(
-            appOrPageCtx as any,
-          );
-          const originalPageProps = isApp
-            ? originalProps.pageProps ?? {}
-            : originalProps;
-
-          pageProps = {
-            ...originalPageProps,
-            ...pageProps,
-          };
-        }
-        const getAppTreeProps = (props: Record<string, unknown>) =>
-          isApp ? { pageProps: props } : props;
-
-        if (typeof window !== 'undefined' || !opts.ssr) {
-          return getAppTreeProps(pageProps);
-        }
-
-        const config = getClientConfig({ ctx });
-        const trpcClient = createTRPCUntypedClient(config);
-        const queryClient = getQueryClient(config);
-
-        const trpcProp: TRPCPrepassProps = {
-          config,
-          trpcClient,
-          queryClient,
-          ssrState: 'prepass',
-          ssrContext: ctx as TSSRContext,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const originalProps = await AppOrPage.getInitialProps!(
+          appOrPageCtx as any,
+        );
+        const originalPageProps = isApp
+          ? originalProps.pageProps ?? {}
+          : originalProps;
+
+        pageProps = {
+          ...originalPageProps,
+          ...pageProps,
         };
-        const prepassProps = {
-          pageProps,
-          trpc: trpcProp,
-        };
-
-        // 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
-          await ssrPrepass(createElement(AppTree, prepassProps as any));
-          if (!queryClient.isFetching()) {
-            // the render didn't cause the queryClient to fetch anything
-            break;
-          }
-
-          // wait until the query cache has settled it's promises
-          await new Promise<void>((resolve) => {
-            const unsub = queryClient.getQueryCache().subscribe((event) => {
-              if (event?.query.getObserversCount() === 0) {
-                resolve();
-                unsub();
-              }
-            });
-          });
-        }
-        const dehydratedCache = dehydrate(queryClient, {
-          shouldDehydrateQuery() {
-            // makes sure errors are also dehydrated
-            return true;
-          },
-        });
-        // 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);
-
-        const meta =
-          opts.responseMeta?.({
-            ctx,
-            clientErrors: [
-              ...dehydratedCache.queries,
-              ...dehydratedCache.mutations,
-            ]
-              .map((v) => v.state.error)
-              .flatMap((err) =>
-                err instanceof Error && err.name === 'TRPCClientError'
-                  ? [err as TRPCClientError<TRouter>]
-                  : [],
-              ),
-          }) ?? {};
+        const getAppTreeProps = (props: Dict<unknown>) =>
+          isApp ? { pageProps: props } : props;
 
-        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;
+        return getAppTreeProps(pageProps);
       };
     }
 

package/ssrPrepass/index.d.ts

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

package/ssrPrepass/index.js

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

package/dist/shared-642894f4.js

@@ -1,19 +0,0 @@
-import '@trpc/server/shared';
-
-/**
- * @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 };