@trpc/next 10.26.0 → 10.27.0

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

@@ -0,0 +1,218 @@
+import {
+  CreateTRPCClientOptions,
+  TRPCClientError,
+  TRPCLink,
+  TRPCRequestOptions,
+  createTRPCUntypedClient,
+} from '@trpc/client';
+import { transformResult } from '@trpc/client/shared';
+import {
+  AnyProcedure,
+  AnyRouter,
+  MaybePromise,
+  ProcedureOptions,
+  Simplify,
+  inferHandlerInput,
+} from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TRPCActionHandler } from './server';
+import { ActionHandlerDef, isFormData } from './shared';
+
+interface Def {
+  input?: any;
+  output?: any;
+  errorShape: any;
+}
+
+type MutationArgs<TDef extends Def> = TDef['input'] extends void
+  ? [input?: undefined | void, opts?: ProcedureOptions]
+  : [input: TDef['input'] | FormData, opts?: ProcedureOptions];
+
+interface UseTRPCActionBaseResult<TDef extends Def> {
+  mutate: (...args: MutationArgs<TDef>) => void;
+  mutateAsync: (...args: MutationArgs<TDef>) => Promise<Def['output']>;
+}
+
+interface UseTRPCActionSuccessResult<TDef extends Def>
+  extends UseTRPCActionBaseResult<TDef> {
+  data: TDef['output'];
+  error?: never;
+  status: 'success';
+}
+
+interface UseTRPCActionErrorResult<TDef extends Def>
+  extends UseTRPCActionBaseResult<TDef> {
+  data?: never;
+  error: TRPCClientError<TDef['errorShape']>;
+  status: 'error';
+}
+
+interface UseTRPCActionIdleResult<TDef extends Def>
+  extends UseTRPCActionBaseResult<TDef> {
+  data?: never;
+  error?: never;
+  status: 'idle';
+}
+
+interface UseTRPCActionLoadingResult<TDef extends Def>
+  extends UseTRPCActionBaseResult<TDef> {
+  data?: never;
+  error?: never;
+  status: 'loading';
+}
+
+// ts-prune-ignore-next
+export type UseTRPCActionResult<TDef extends Def> =
+  | UseTRPCActionSuccessResult<TDef>
+  | UseTRPCActionErrorResult<TDef>
+  | UseTRPCActionIdleResult<TDef>
+  | UseTRPCActionLoadingResult<TDef>;
+
+type ActionContext = {
+  _action: (...args: any[]) => Promise<any>;
+};
+
+// ts-prune-ignore-next
+export function experimental_serverActionLink<
+  TRouter extends AnyRouter = AnyRouter,
+>(): TRPCLink<TRouter> {
+  return (runtime) =>
+    ({ op }) =>
+      observable((observer) => {
+        const context = op.context as ActionContext;
+
+        context
+          ._action(
+            isFormData(op.input)
+              ? op.input
+              : runtime.transformer.serialize(op.input),
+          )
+          .then((data) => {
+            const transformed = transformResult(data, runtime);
+
+            if (!transformed.ok) {
+              observer.error(TRPCClientError.from(transformed.error, {}));
+              return;
+            }
+            observer.next({
+              context: op.context,
+              result: transformed.result,
+            });
+            observer.complete();
+          })
+          .catch((cause) => observer.error(TRPCClientError.from(cause)));
+      });
+}
+
+// ts-prune-ignore-next
+/**
+ * @internal
+ */
+export type inferActionResultProps<TProc extends AnyProcedure> = {
+  input: inferHandlerInput<TProc>[0];
+  output: TProc['_def']['_output_out'];
+  errorShape: TProc['_def']['_config']['$types']['errorShape'];
+};
+
+interface UseTRPCActionOptions<TDef extends Def> {
+  onSuccess?: (result: TDef['output']) => void | MaybePromise<void>;
+  onError?: (result: TRPCClientError<TDef['errorShape']>) => MaybePromise<void>;
+}
+
+// ts-prune-ignore-next
+export function experimental_createActionHook<TRouter extends AnyRouter>(
+  opts: CreateTRPCClientOptions<TRouter>,
+) {
+  type ActionContext = {
+    _action: (...args: any[]) => Promise<any>;
+  };
+  const client = createTRPCUntypedClient(opts);
+  return function useAction<TDef extends ActionHandlerDef>(
+    handler: TRPCActionHandler<TDef>,
+    useActionOpts?: UseTRPCActionOptions<Simplify<TDef>>,
+  ) {
+    const count = useRef(0);
+
+    type Result = UseTRPCActionResult<TDef>;
+    type State = Omit<Result, 'mutate' | 'mutateAsync'>;
+    const [state, setState] = useState<State>({
+      status: 'idle',
+    });
+
+    const actionOptsRef = useRef(useActionOpts);
+    actionOptsRef.current = useActionOpts;
+
+    useEffect(() => {
+      return () => {
+        // cleanup after unmount to prevent calling hook opts after unmount
+        count.current = -1;
+        actionOptsRef.current = undefined;
+      };
+    }, []);
+
+    const mutateAsync = useCallback(
+      (input: any, requestOptions?: TRPCRequestOptions) => {
+        const idx = ++count.current;
+        const context = {
+          ...requestOptions?.context,
+          _action(innerInput) {
+            return handler(innerInput);
+          },
+        } as ActionContext;
+
+        setState({
+          status: 'loading',
+        });
+        return client
+          .mutation('serverAction', input, {
+            ...requestOptions,
+            context,
+          })
+          .then(async (data) => {
+            await actionOptsRef.current?.onSuccess?.(data as any);
+            if (idx !== count.current) {
+              return;
+            }
+            setState({
+              status: 'success',
+              data: data as any,
+            });
+          })
+          .catch(async (error) => {
+            await actionOptsRef.current?.onError?.(error);
+            throw error;
+          })
+          .catch((error) => {
+            if (idx !== count.current) {
+              return;
+            }
+            setState({
+              status: 'error',
+              error: TRPCClientError.from(error, {}),
+            });
+            throw error;
+          });
+      },
+      [handler],
+    ) as Result['mutateAsync'];
+
+    const mutate: Result['mutate'] = useCallback(
+      (...args: any[]) => {
+        void (mutateAsync as any)(...args).catch(() => {
+          // ignored
+        });
+      },
+      [mutateAsync],
+    );
+
+    return useMemo(
+      () => ({
+        ...state,
+        mutate,
+        mutateAsync,
+      }),
+      [mutate, mutateAsync, state],
+    ) as Result;
+  };
+}

package/src/app-dir/formDataToObject.test.ts

@@ -0,0 +1,58 @@
+import { formDataToObject } from './formDataToObject';
+
+test('basic', () => {
+  const formData = new FormData();
+
+  formData.append('foo', 'bar');
+
+  expect(formDataToObject(formData)).toEqual({
+    foo: 'bar',
+  });
+});
+
+test('multiple values on the same key', () => {
+  const formData = new FormData();
+
+  formData.append('foo', 'bar');
+  formData.append('foo', 'baz');
+
+  expect(formDataToObject(formData)).toEqual({
+    foo: ['bar', 'baz'],
+  });
+});
+
+test('deep key', () => {
+  const formData = new FormData();
+
+  formData.append('foo.bar.baz', 'qux');
+
+  expect(formDataToObject(formData)).toEqual({
+    foo: {
+      bar: {
+        baz: 'qux',
+      },
+    },
+  });
+});
+
+test('array', () => {
+  const formData = new FormData();
+
+  formData.append('foo[0]', 'bar');
+  formData.append('foo[1]', 'baz');
+
+  expect(formDataToObject(formData)).toEqual({
+    foo: ['bar', 'baz'],
+  });
+});
+
+test('array with dot notation', () => {
+  const formData = new FormData();
+
+  formData.append('foo.0', 'bar');
+  formData.append('foo.1', 'baz');
+
+  expect(formDataToObject(formData)).toEqual({
+    foo: ['bar', 'baz'],
+  });
+});

package/src/app-dir/formDataToObject.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+function set(
+  obj: Record<string, any>,
+  path: string | string[],
+  value: unknown,
+): void {
+  if (typeof path === 'string') {
+    path = path.split(/[\.\[\]]/).filter(Boolean);
+  }
+
+  if (path.length > 1) {
+    const p = path.shift()!;
+    const isArrayIndex = /^\d+$/.test(path[0]!);
+    obj[p] = obj[p] || (isArrayIndex ? [] : {});
+    set(obj[p], path, value);
+    return;
+  }
+  const p = path[0]!;
+  if (obj[p] === undefined) {
+    obj[p] = value;
+  } else if (Array.isArray(obj[p])) {
+    obj[p].push(value);
+  } else {
+    obj[p] = [obj[p], value];
+  }
+}
+
+export function formDataToObject(formData: FormData) {
+  const obj: Record<string, unknown> = {};
+
+  for (const [key, value] of formData.entries()) {
+    set(obj, key, value);
+  }
+
+  return obj;
+}

package/src/app-dir/server.ts

@@ -1,14 +1,34 @@
 /// <reference types="next" />
-
 import {
   CreateTRPCProxyClient,
   clientCallTypeToProcedureType,
   createTRPCUntypedClient,
 } from '@trpc/client';
-import { AnyRouter } from '@trpc/server';
-import { createRecursiveProxy } from '@trpc/server/shared';
+import {
+  AnyProcedure,
+  AnyRootConfig,
+  AnyRouter,
+  CombinedDataTransformer,
+  MaybePromise,
+  Simplify,
+  TRPCError,
+  getTRPCErrorFromUnknown,
+  inferProcedureInput,
+} from '@trpc/server';
+import { TRPCResponse } from '@trpc/server/rpc';
+import {
+  createRecursiveProxy,
+  getErrorShape,
+  transformTRPCResponse,
+} from '@trpc/server/shared';
 import { cache } from 'react';
-import { CreateTRPCNextAppRouterOptions } from './shared';
+import { formDataToObject } from './formDataToObject';
+import {
+  ActionHandlerDef,
+  CreateTRPCNextAppRouterOptions,
+  inferActionDef,
+  isFormData,
+} from './shared';
 
 // ts-prune-ignore-next
 export function experimental_createTRPCNextAppDirServer<
@@ -32,3 +52,89 @@ export function experimental_createTRPCNextAppDirServer<
     return (client[procedureType] as any)(fullPath, ...callOpts.args);
   }) as CreateTRPCProxyClient<TRouter>;
 }
+
+/**
+ * @internal
+ */
+export type TRPCActionHandler<TDef extends ActionHandlerDef> = (
+  input: TDef['input'] | FormData,
+) => Promise<TRPCResponse<TDef['output'], TDef['errorShape']>>;
+
+export function experimental_createServerActionHandler<
+  TInstance extends {
+    _config: AnyRootConfig;
+  },
+>(
+  t: TInstance,
+  opts: {
+    createContext: () => MaybePromise<TInstance['_config']['$types']['ctx']>;
+    /**
+     * Transform form data to a `Record` before passing it to the procedure
+     * @default true
+     */
+    normalizeFormData?: boolean;
+  },
+) {
+  const config = t._config;
+  const { normalizeFormData = true, createContext } = opts;
+
+  const transformer = config.transformer as CombinedDataTransformer;
+
+  // TODO allow this to take a `TRouter` in addition to a `AnyProcedure`
+  return function createServerAction<TProc extends AnyProcedure>(
+    proc: TProc,
+  ): TRPCActionHandler<Simplify<inferActionDef<TProc>>> {
+    return async function actionHandler(
+      rawInput: inferProcedureInput<TProc> | FormData,
+    ) {
+      const ctx: undefined | TInstance['_config']['$types']['ctx'] = undefined;
+      try {
+        const ctx = await createContext();
+        if (normalizeFormData && isFormData(rawInput)) {
+          // Normalizes formdata so we can use `z.object({})` etc on the server
+          try {
+            rawInput = formDataToObject(rawInput);
+          } catch {
+            throw new TRPCError({
+              code: 'INTERNAL_SERVER_ERROR',
+              message: 'Failed to convert FormData to an object',
+            });
+          }
+        } else if (rawInput && !isFormData(rawInput)) {
+          rawInput = transformer.input.deserialize(rawInput);
+        }
+
+        const data = await proc({
+          input: undefined,
+          ctx,
+          path: 'serverAction',
+          rawInput,
+          type: proc._type,
+        });
+
+        const transformedJSON = transformTRPCResponse(config, {
+          result: {
+            data,
+          },
+        });
+        return transformedJSON;
+      } catch (cause) {
+        const error = getTRPCErrorFromUnknown(cause);
+        const shape = getErrorShape({
+          config,
+          ctx,
+          error,
+          input: rawInput,
+          path: 'serverAction',
+          type: proc._type,
+        });
+
+        // TODO: send the right HTTP header?!
+
+        return transformTRPCResponse(t._config, {
+          error: shape,
+        });
+      }
+    } as TRPCActionHandler<inferActionDef<TProc>>;
+  };
+}

package/src/app-dir/shared.ts

@@ -4,11 +4,13 @@ import {
   TRPCUntypedClient,
 } from '@trpc/client';
 import {
+  AnyProcedure,
   AnyQueryProcedure,
   AnyRouter,
   Filter,
   ProtectedIntersection,
   ThenArg,
+  inferHandlerInput,
 } from '@trpc/server';
 import { createRecursiveProxy } from '@trpc/server/shared';
 
@@ -59,3 +61,33 @@ export type CreateTRPCNextAppRouter<TRouter extends AnyRouter> =
 export interface CreateTRPCNextAppRouterOptions<TRouter extends AnyRouter> {
   config: () => CreateTRPCClientOptions<TRouter>;
 }
+
+/**
+ * @internal
+ */
+export function isFormData(value: unknown): value is FormData {
+  if (typeof FormData === 'undefined') {
+    // FormData is not supported
+    return false;
+  }
+  return value instanceof FormData;
+}
+
+/**
+ * @internal
+ */
+export interface ActionHandlerDef {
+  input?: any;
+  output?: any;
+  errorShape: any;
+}
+
+// ts-prune-ignore-next
+/**
+ * @internal
+ */
+export type inferActionDef<TProc extends AnyProcedure> = {
+  input: inferHandlerInput<TProc>[0];
+  output: TProc['_def']['_output_out'];
+  errorShape: TProc['_def']['_config']['$types']['errorShape'];
+};