feat: add trpc openapi (#1535)

apps/web/package.json

@@ -56,6 +56,7 @@
     "recharts": "^2.7.2",
     "remeda": "^2.17.3",
     "sharp": "0.32.6",
+    "trpc-openapi": "^1.2.0",
     "ts-pattern": "^5.0.5",
     "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx

@@ -37,10 +37,8 @@ export const DocumentPageViewRecentActivity = ({
     {
       documentId,
       filterForRecentActivity: true,
-      orderBy: {
-        column: 'createdAt',
-        direction: 'asc',
-      },
+      orderByColumn: 'createdAt',
+      orderByDirection: 'asc',
       perPage: 10,
     },
     {

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -12,8 +12,8 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
+import type { TGetDocumentWithDetailsByIdResponse } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { DocumentDistributionMethod, DocumentStatus } from '@documenso/prisma/client';
-import type { DocumentWithDetails } from '@documenso/prisma/types/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -35,7 +35,7 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  initialDocument: DocumentWithDetails;
+  initialDocument: TGetDocumentWithDetailsByIdResponse;
   documentRootPath: string;
   isDocumentEnterprise: boolean;
 };
@@ -103,7 +103,7 @@ export const EditDocumentForm = ({
 
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newFields) => {
+    onSuccess: ({ fields: newFields }) => {
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
@@ -134,7 +134,7 @@ export const EditDocumentForm = ({
 
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newRecipients) => {
+    onSuccess: ({ recipients: newRecipients }) => {
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -9,8 +9,8 @@ import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { FindResultResponse } from '@documenso/lib/types/search-params';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { TFindDocumentsResponse } from '@documenso/lib/server-only/document/find-documents';
+import type { Team } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -24,13 +24,7 @@ import { DataTableActionDropdown } from './data-table-action-dropdown';
 import { DataTableTitle } from './data-table-title';
 
 export type DocumentsDataTableProps = {
-  results: FindResultResponse<
-    Document & {
-      Recipient: Recipient[];
-      User: Pick<User, 'id' | 'name' | 'email'>;
-      team: Pick<Team, 'id' | 'url'> | null;
-    }
-  >;
+  results: TFindDocumentsResponse;
   showSenderColumn?: boolean;
   team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };

apps/web/src/app/(dashboard)/templates/[id]/template-page-view-recent-activity.tsx

@@ -26,10 +26,8 @@ export const TemplatePageViewRecentActivity = ({
   const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocuments.useQuery({
     templateId,
     teamId,
-    orderBy: {
-      column: 'createdAt',
-      direction: 'asc',
-    },
+    orderByColumn: 'createdAt',
+    orderByDirection: 'asc',
     perPage: 5,
   });
 

apps/web/src/app/(dashboard)/templates/move-template-dialog.tsx

@@ -4,8 +4,10 @@ import { useRouter } from 'next/navigation';
 
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { match } from 'ts-pattern';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -51,10 +53,20 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
       });
       onOpenChange(false);
     },
-    onError: (error) => {
+    onError: (err) => {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.NOT_FOUND,
+          () => msg`Template not found or already associated with a team.`,
+        )
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not a member of this team.`)
+        .otherwise(() => msg`An error occurred while moving the template.`);
+
       toast({
         title: _(msg`Error`),
-        description: error.message || _(msg`An error occurred while moving the template.`),
+        description: _(errorMessage),
         variant: 'destructive',
         duration: 7500,
       });

apps/web/src/pages/api/beta/[...trpc].ts

@@ -0,0 +1,47 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { createOpenApiNextHandler } from 'trpc-openapi';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { buildLogger } from '@documenso/lib/utils/logger';
+import type { TRPCError } from '@documenso/trpc/server';
+import { createTrpcContext } from '@documenso/trpc/server/context';
+import { appRouter } from '@documenso/trpc/server/router';
+
+const logger = buildLogger();
+
+export default createOpenApiNextHandler<typeof appRouter>({
+  router: appRouter,
+  createContext: async ({ req, res }: { req: NextApiRequest; res: NextApiResponse }) =>
+    createTrpcContext({ req, res }),
+  onError: ({ error, path }: { error: TRPCError; path?: string }) => {
+    // Always log the error for now.
+    console.error(error.message);
+
+    const appError = AppError.parseError(error.cause || error);
+
+    const isAppError = error.cause instanceof AppError;
+
+    // Only log AppErrors that are explicitly set to 500 or the error code
+    // is in the errorCodesToAlertOn list.
+    const isLoggableAppError =
+      isAppError && (appError.statusCode === 500 || errorCodesToAlertOn.includes(appError.code));
+
+    // Only log TRPC errors that are in the `errorCodesToAlertOn` list and is
+    // not an AppError.
+    const isLoggableTrpcError = !isAppError && errorCodesToAlertOn.includes(error.code);
+
+    if (isLoggableAppError || isLoggableTrpcError) {
+      logger.error(error, {
+        method: path,
+        context: {
+          source: '/v2/api',
+          appError: AppError.toJSON(appError),
+        },
+      });
+    }
+  },
+  responseMeta: () => {},
+});
+
+const errorCodesToAlertOn = [AppErrorCode.UNKNOWN_ERROR, 'INTERNAL_SERVER_ERROR'];

apps/web/src/pages/api/beta/open-api.json.ts

@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { openApiDocument } from '@documenso/trpc/server/open-api';
+
+const handler = (_req: NextApiRequest, res: NextApiResponse) => {
+  res.status(200).send(openApiDocument);
+};
+
+export default handler;

apps/web/src/pages/api/trpc/[trpc].ts

@@ -45,6 +45,7 @@ export default trpcNext.createNextApiHandler({
       logger.error(error, {
         method: path,
         context: {
+          source: 'trpc',
           appError: AppError.toJSON(appError),
         },
       });