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

package/src/app-dir/server.ts

@@ -3,34 +3,37 @@ import {
   clientCallTypeToProcedureType,
   createTRPCUntypedClient,
 } from '@trpc/client';
-import {
+import type {
   AnyProcedure,
-  AnyRootConfig,
+  AnyRootTypes,
   AnyRouter,
-  CombinedDataTransformer,
-  getTRPCErrorFromUnknown,
+  ErrorHandlerOptions,
+  inferClientTypes,
   inferProcedureInput,
   MaybePromise,
+  RootConfig,
   Simplify,
-  TRPCError,
-} from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
+  TRPCResponse,
+} from '@trpc/server/unstable-core-do-not-import';
 import {
   createRecursiveProxy,
   getErrorShape,
+  getTRPCErrorFromUnknown,
   transformTRPCResponse,
-} from '@trpc/server/shared';
+  TRPCError,
+} from '@trpc/server/unstable-core-do-not-import';
 import { revalidateTag } from 'next/cache';
+import { isNotFoundError } from 'next/dist/client/components/not-found';
+import { isRedirectError } from 'next/dist/client/components/redirect';
 import { cache } from 'react';
 import { formDataToObject } from './formDataToObject';
-import {
+import type {
   ActionHandlerDef,
   CreateTRPCNextAppRouterOptions,
-  generateCacheTag,
   inferActionDef,
-  isFormData,
 } from './shared';
-import { NextAppDirDecoratedProcedureRecord } from './types';
+import { generateCacheTag, isFormData } from './shared';
+import type { NextAppDirDecorateRouterRecord } from './types';
 
 // ts-prune-ignore-next
 export function experimental_createTRPCNextAppDirServer<
@@ -58,12 +61,21 @@ export function experimental_createTRPCNextAppDirServer<
     }
 
     return (client[procedureType] as any)(procedurePath, ...callOpts.args);
-  }) as NextAppDirDecoratedProcedureRecord<
-    TRouter['_def']['_config'],
+  }) as NextAppDirDecorateRouterRecord<
+    TRouter['_def']['_config']['$types'],
     TRouter['_def']['record']
   >;
 }
 
+/**
+ * Rethrow errors that should be handled by Next.js
+ */
+const throwNextErrors = (error: TRPCError) => {
+  const { cause } = error;
+  if (isRedirectError(cause) || isNotFoundError(cause)) {
+    throw error.cause;
+  }
+};
 /**
  * @internal
  */
@@ -73,36 +85,63 @@ export type TRPCActionHandler<TDef extends ActionHandlerDef> = (
 
 export function experimental_createServerActionHandler<
   TInstance extends {
-    _config: AnyRootConfig;
+    _config: RootConfig<AnyRootTypes>;
   },
 >(
   t: TInstance,
-  opts: {
-    createContext: () => MaybePromise<TInstance['_config']['$types']['ctx']>;
+  opts: (object extends TInstance['_config']['$types']['ctx']
+    ? {
+        createContext?: () => MaybePromise<
+          TInstance['_config']['$types']['ctx']
+        >;
+      }
+    : {
+        createContext: () => MaybePromise<
+          TInstance['_config']['$types']['ctx']
+        >;
+      }) & {
     /**
      * Transform form data to a `Record` before passing it to the procedure
      * @default true
      */
     normalizeFormData?: boolean;
+    /**
+     * Called when an error occurs in the handler
+     */
+    onError?: (
+      opts: ErrorHandlerOptions<TInstance['_config']['$types']['ctx']>,
+    ) => void;
+
+    /**
+     * Rethrow errors that should be handled by Next.js
+     * @default true
+     */
+    rethrowNextErrors?: boolean;
   },
 ) {
   const config = t._config;
-  const { normalizeFormData = true, createContext } = opts;
+  const {
+    normalizeFormData = true,
+    createContext,
+    rethrowNextErrors = true,
+  } = opts;
 
-  const transformer = config.transformer as CombinedDataTransformer;
+  const transformer = config.transformer;
 
   // TODO allow this to take a `TRouter` in addition to a `AnyProcedure`
   return function createServerAction<TProc extends AnyProcedure>(
     proc: TProc,
-  ): TRPCActionHandler<Simplify<inferActionDef<TInstance['_config'], TProc>>> {
+  ): TRPCActionHandler<
+    Simplify<inferActionDef<inferClientTypes<TInstance>, TProc>>
+  > {
     return async function actionHandler(
       rawInput: FormData | inferProcedureInput<TProc>,
     ) {
-      const ctx: TInstance['_config']['$types']['ctx'] | undefined = undefined;
+      let ctx: TInstance['_config']['$types']['ctx'] | undefined = undefined;
       try {
-        const ctx = await createContext();
+        ctx = (await createContext?.()) ?? {};
         if (normalizeFormData && isFormData(rawInput)) {
-          // Normalizes formdata so we can use `z.object({})` etc on the server
+          // Normalizes FormData so we can use `z.object({})` etc on the server
           try {
             rawInput = formDataToObject(rawInput);
           } catch {
@@ -115,13 +154,15 @@ export function experimental_createServerActionHandler<
           rawInput = transformer.input.deserialize(rawInput);
         }
 
-        const data = await proc({
-          input: undefined,
-          ctx,
-          path: 'serverAction',
-          getRawInput: async () => rawInput,
-          type: proc._def.type,
-        });
+        const data = proc._def.experimental_caller
+          ? await proc(rawInput as any)
+          : await proc({
+              input: undefined,
+              ctx,
+              path: '',
+              getRawInput: async () => rawInput,
+              type: proc._def.type,
+            });
 
         const transformedJSON = transformTRPCResponse(config, {
           result: {
@@ -131,22 +172,33 @@ export function experimental_createServerActionHandler<
         return transformedJSON;
       } catch (cause) {
         const error = getTRPCErrorFromUnknown(cause);
+
+        opts.onError?.({
+          ctx,
+          error,
+          input: rawInput,
+          path: '',
+          type: proc._def.type,
+        });
+
+        rethrowNextErrors && throwNextErrors(error);
+
         const shape = getErrorShape({
           config,
           ctx,
           error,
           input: rawInput,
-          path: 'serverAction',
+          path: '',
           type: proc._def.type,
         });
 
-        // TODO: send the right HTTP header?!
-
         return transformTRPCResponse(t._config, {
           error: shape,
         });
       }
-    } as TRPCActionHandler<inferActionDef<TInstance['_config'], TProc>>;
+    } as TRPCActionHandler<
+      inferActionDef<TInstance['_config']['$types'], TProc>
+    >;
   };
 }
 

package/src/app-dir/shared.ts

@@ -1,30 +1,41 @@
-import {
+import type {
   CreateTRPCClientOptions,
   Resolver,
   TRPCUntypedClient,
 } from '@trpc/client';
-import {
+import type { inferProcedureOutput } from '@trpc/server';
+import type {
+  AnyClientTypes,
   AnyProcedure,
   AnyQueryProcedure,
-  AnyRootConfig,
+  AnyRootTypes,
   AnyRouter,
-  Filter,
-  inferHandlerInput,
+  inferProcedureInput,
+  inferTransformedProcedureOutput,
   ProtectedIntersection,
-  ThenArg,
-} from '@trpc/server';
-import { createRecursiveProxy } from '@trpc/server/shared';
+  RouterRecord,
+} from '@trpc/server/unstable-core-do-not-import';
+import { createRecursiveProxy } from '@trpc/server/unstable-core-do-not-import';
 
 /**
  * @internal
  */
-export type UseProcedureRecord<TRouter extends AnyRouter> = {
-  [TKey in keyof Filter<
-    TRouter['_def']['record'],
-    AnyQueryProcedure | AnyRouter
-  >]: TRouter['_def']['record'][TKey] extends AnyRouter
-    ? UseProcedureRecord<TRouter['_def']['record'][TKey]>
-    : Resolver<TRouter['_def']['_config'], TRouter['_def']['record'][TKey]>;
+export type UseProcedureRecord<
+  TRoot extends AnyRootTypes,
+  TRecord extends RouterRecord,
+> = {
+  [TKey in keyof TRecord]: TRecord[TKey] extends infer $Value
+    ? $Value extends RouterRecord
+      ? UseProcedureRecord<TRoot, $Value>
+      : $Value extends AnyQueryProcedure
+      ? Resolver<{
+          input: inferProcedureInput<$Value>;
+          output: inferTransformedProcedureOutput<TRoot, $Value>;
+          errorShape: TRoot['errorShape'];
+          transformer: TRoot['transformer'];
+        }>
+      : never
+    : never;
 };
 
 export function createUseProxy<TRouter extends AnyRouter>(
@@ -34,18 +45,31 @@ export function createUseProxy<TRouter extends AnyRouter>(
     const path = opts.path.join('.');
 
     return client.query(path, ...opts.args);
-  }) as UseProcedureRecord<TRouter>;
+  }) as UseProcedureRecord<
+    TRouter['_def']['_config']['$types'],
+    TRouter['_def']['record']
+  >;
 }
 
 type NextAppRouterUse<TRouter extends AnyRouter> = {
   <TData extends Promise<unknown>[]>(
-    cb: (t: UseProcedureRecord<TRouter>) => [...TData],
+    cb: (
+      t: UseProcedureRecord<
+        TRouter['_def']['_config']['$types'],
+        TRouter['_def']['record']
+      >,
+    ) => [...TData],
   ): {
-    [TKey in keyof TData]: ThenArg<TData[TKey]>;
+    [TKey in keyof TData]: Awaited<TData[TKey]>;
   };
   <TData extends Promise<unknown>>(
-    cb: (t: UseProcedureRecord<TRouter>) => TData,
-  ): ThenArg<TData>;
+    cb: (
+      t: UseProcedureRecord<
+        TRouter['_def']['_config']['$types'],
+        TRouter['_def']['record']
+      >,
+    ) => TData,
+  ): Awaited<TData>;
 };
 type CreateTRPCNextAppRouterBase<TRouter extends AnyRouter> = {
   use: NextAppRouterUse<TRouter>;
@@ -53,7 +77,10 @@ type CreateTRPCNextAppRouterBase<TRouter extends AnyRouter> = {
 export type CreateTRPCNextAppRouter<TRouter extends AnyRouter> =
   ProtectedIntersection<
     CreateTRPCNextAppRouterBase<TRouter>,
-    UseProcedureRecord<TRouter>
+    UseProcedureRecord<
+      TRouter['_def']['_config']['$types'],
+      TRouter['_def']['record']
+    >
   >;
 
 /**
@@ -94,10 +121,10 @@ export interface ActionHandlerDef {
  * @internal
  */
 export type inferActionDef<
-  TConfig extends AnyRootConfig,
+  TRoot extends AnyClientTypes,
   TProc extends AnyProcedure,
 > = {
-  input: inferHandlerInput<TProc>[0];
-  output: TProc['_def']['_output_out'];
-  errorShape: TConfig['$types']['errorShape'];
+  input: inferProcedureInput<TProc>;
+  output: inferProcedureOutput<TProc>;
+  errorShape: TRoot['errorShape'];
 };

package/src/app-dir/types.ts

@@ -1,47 +1,59 @@
-import { Resolver } from '@trpc/client';
-import {
-  AnyMutationProcedure,
+import type { Resolver } from '@trpc/client';
+import type {
   AnyProcedure,
-  AnyQueryProcedure,
-  AnyRootConfig,
-  AnyRouter,
-  AnySubscriptionProcedure,
-  ProcedureArgs,
-  ProcedureRouterRecord,
-} from '@trpc/server';
+  AnyRootTypes,
+  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<
-  TConfig extends AnyRootConfig,
-  TProcedure extends AnyProcedure,
-> = TProcedure extends AnyQueryProcedure
+  TType extends ProcedureType,
+  TDef extends ResolverDef,
+> = TType extends 'query'
   ? {
-      query: Resolver<TConfig, TProcedure>;
+      query: Resolver<TDef>;
       revalidate: (
-        input?: ProcedureArgs<TProcedure['_def']>[0],
+        input?: TDef['input'],
       ) => Promise<
         { revalidated: false; error: string } | { revalidated: true }
       >;
     }
-  : TProcedure extends AnyMutationProcedure
+  : TType extends 'mutation'
   ? {
-      mutate: Resolver<TConfig, TProcedure>;
+      mutate: Resolver<TDef>;
     }
-  : TProcedure extends AnySubscriptionProcedure
+  : TType extends 'subscription'
   ? {
-      subscribe: Resolver<TConfig, TProcedure>;
+      subscribe: Resolver<TDef>;
     }
   : never;
 
-export type NextAppDirDecoratedProcedureRecord<
-  TConfig extends AnyRootConfig,
-  TProcedures extends ProcedureRouterRecord,
+export type NextAppDirDecorateRouterRecord<
+  TRoot extends AnyRootTypes,
+  TRecord extends RouterRecord,
 > = {
-  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
-    ? NextAppDirDecoratedProcedureRecord<
-        TConfig,
-        TProcedures[TKey]['_def']['record']
-      >
-    : TProcedures[TKey] extends AnyProcedure
-    ? DecorateProcedureServer<TConfig, TProcedures[TKey]>
+  [TKey in keyof TRecord]: TRecord[TKey] extends infer $Value
+    ? $Value extends RouterRecord
+      ? NextAppDirDecorateRouterRecord<TRoot, $Value>
+      : $Value extends AnyProcedure
+      ? DecorateProcedureServer<
+          $Value['_def']['type'],
+          {
+            input: inferProcedureInput<$Value>;
+            output: inferTransformedProcedureOutput<TRoot, $Value>;
+            errorShape: TRoot['errorShape'];
+            transformer: TRoot['transformer'];
+          }
+        >
+      : never
     : never;
 };

package/src/createTRPCNext.tsx

@@ -1,18 +1,25 @@
 /* istanbul ignore file -- @preserve */
 // We're testing this through E2E-testing
+import type {
+  CreateReactUtils,
+  DecorateRouterRecord,
+  TRPCUseQueries,
+  TRPCUseSuspenseQueries,
+} from '@trpc/react-query/shared';
 import {
   createReactDecoration,
   createReactQueryUtils,
-  CreateReactUtils,
   createRootHooks,
-  DecoratedProcedureRecord,
-  TRPCUseQueries,
 } from '@trpc/react-query/shared';
-import { AnyRouter, ProtectedIntersection } from '@trpc/server';
-import { createFlatProxy } from '@trpc/server/shared';
-import { NextPageContext } from 'next/types';
+import type {
+  AnyRouter,
+  ProtectedIntersection,
+} from '@trpc/server/unstable-core-do-not-import';
+import { createFlatProxy } from '@trpc/server/unstable-core-do-not-import';
+import type { NextPageContext } from 'next/types';
 import { useMemo } from 'react';
-import { withTRPC, WithTRPCNoSSROptions, WithTRPCSSROptions } from './withTRPC';
+import type { WithTRPCNoSSROptions, WithTRPCSSROptions } from './withTRPC';
+import { withTRPC } from './withTRPC';
 
 /**
  * @internal
@@ -24,15 +31,16 @@ export interface CreateTRPCNextBase<
   /**
    * @deprecated renamed to `useUtils` and will be removed in a future tRPC version
    *
-   * @see https://trpc.io/docs/client/react/useUtils
+   * @link https://trpc.io/docs/v11/client/react/useUtils
    */
   useContext(): CreateReactUtils<TRouter, TSSRContext>;
   /**
-   * @see https://trpc.io/docs/client/react/useUtils
+   * @link https://trpc.io/docs/v11/client/react/useUtils
    */
   useUtils(): CreateReactUtils<TRouter, TSSRContext>;
   withTRPC: ReturnType<typeof withTRPC<TRouter, TSSRContext>>;
   useQueries: TRPCUseQueries<TRouter>;
+  useSuspenseQueries: TRPCUseSuspenseQueries<TRouter>;
 }
 
 /**
@@ -41,23 +49,20 @@ export interface CreateTRPCNextBase<
 export type CreateTRPCNext<
   TRouter extends AnyRouter,
   TSSRContext extends NextPageContext,
-  TFlags,
 > = ProtectedIntersection<
   CreateTRPCNextBase<TRouter, TSSRContext>,
-  DecoratedProcedureRecord<
-    TRouter['_def']['_config'],
-    TRouter['_def']['record'],
-    TFlags
+  DecorateRouterRecord<
+    TRouter['_def']['_config']['$types'],
+    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`
@@ -78,6 +83,10 @@ export function createTRPCNext<
       return hooks.useQueries;
     }
 
+    if (key === 'useSuspenseQueries') {
+      return hooks.useSuspenseQueries;
+    }
+
     if (key === 'withTRPC') {
       return _withTRPC;
     }

package/src/ssrPrepass.ts

@@ -0,0 +1,185 @@
+/**
+ * Heavily based on urql's ssr
+ * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
+ */
+import type { DehydratedState } from '@tanstack/react-query';
+import { dehydrate } from '@tanstack/react-query';
+import { createTRPCUntypedClient } from '@trpc/client';
+import type { CoercedTransformerParameters } from '@trpc/client/unstable-internals';
+import { getTransformer } from '@trpc/client/unstable-internals';
+import type { TRPCClientError, TRPCClientErrorLike } from '@trpc/react-query';
+import { getQueryClient } from '@trpc/react-query/shared';
+import type {
+  AnyRouter,
+  Dict,
+  Maybe,
+} from '@trpc/server/unstable-core-do-not-import';
+import type {
+  AppContextType,
+  NextPageContext,
+} from 'next/dist/shared/lib/utils';
+import { createElement } from 'react';
+import type { TRPCPrepassHelper, TRPCPrepassProps } from './withTRPC';
+
+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 const ssrPrepass: TRPCPrepassHelper = (opts) => {
+  const { parent, WithTRPC, AppOrPage } = opts;
+  type $PrepassProps = TRPCPrepassProps<AnyRouter, any>;
+
+  const transformer = getTransformer(
+    (parent as CoercedTransformerParameters).transformer,
+  );
+  WithTRPC.getInitialProps = async (appOrPageCtx: AppContextType) => {
+    const shouldSsr = async () => {
+      if (typeof window !== 'undefined') {
+        return false;
+      }
+      if (typeof parent.ssr === 'function') {
+        try {
+          return await parent.ssr({ ctx: appOrPageCtx.ctx });
+        } catch (e) {
+          return false;
+        }
+      }
+      return parent.ssr;
+    };
+    const ssrEnabled = await shouldSsr();
+    const AppTree = appOrPageCtx.AppTree;
+
+    // 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' || !ssrEnabled) {
+      return getAppTreeProps(pageProps);
+    }
+
+    const config = parent.config({ ctx });
+    const trpcClient = createTRPCUntypedClient(config);
+    const queryClient = getQueryClient(config);
+
+    const trpcProp: $PrepassProps = {
+      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(createElement(AppTree, prepassProps));
+      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(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);
+
+    const meta =
+      parent.responseMeta?.({
+        ctx,
+        clientErrors: [...dehydratedCache.queries, ...dehydratedCache.mutations]
+          .map((v) => v.state.error)
+          .flatMap((err) =>
+            err instanceof Error && err.name === 'TRPCClientError'
+              ? [err as TRPCClientError<AnyRouter>]
+              : [],
+          ),
+      }) ?? {};
+
+    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;
+  };
+};