feat: use apollo playground in debug mode (#3295)

packages/twenty-server/src/metadata/metadata.module-factory.ts

@@ -1,32 +1,47 @@
-import { YogaDriver, YogaDriverConfig } from '@graphql-yoga/nestjs';
+import { YogaDriverConfig } from '@graphql-yoga/nestjs';
 import { GraphQLError } from 'graphql';
 import GraphQLJSON from 'graphql-type-json';
 import { maskError } from 'graphql-yoga';
 
 import { handleExceptionAndConvertToGraphQLError } from 'src/filters/utils/global-exception-handler.util';
+import { EnvironmentService } from 'src/integrations/environment/environment.service';
 import { ExceptionHandlerService } from 'src/integrations/exception-handler/exception-handler.service';
 import { MetadataModule } from 'src/metadata/metadata.module';
+import { renderApolloPlayground } from 'src/workspace/utils/render-apollo-playground.util';
 
 export const metadataModuleFactory = async (
+  environmentService: EnvironmentService,
   exceptionHandlerService: ExceptionHandlerService,
-): Promise<YogaDriverConfig> => ({
-  context: ({ req }) => ({ req }),
-  driver: YogaDriver,
-  autoSchemaFile: true,
-  include: [MetadataModule],
-  resolvers: { JSON: GraphQLJSON },
-  plugins: [],
-  path: '/metadata',
-  maskedErrors: {
-    maskError(error: GraphQLError, message, isDev) {
-      if (error.originalError) {
-        return handleExceptionAndConvertToGraphQLError(
-          error.originalError,
-          exceptionHandlerService,
-        );
-      }
-
-      return maskError(error, message, isDev);
+): Promise<YogaDriverConfig> => {
+  const config: YogaDriverConfig = {
+    context: ({ req }) => ({ req }),
+    autoSchemaFile: true,
+    include: [MetadataModule],
+    renderGraphiQL() {
+      return renderApolloPlayground({ path: 'metadata' });
     },
-  },
-});
+    resolvers: { JSON: GraphQLJSON },
+    plugins: [],
+    path: '/metadata',
+    maskedErrors: {
+      maskError(error: GraphQLError, message, isDev) {
+        if (error.originalError) {
+          return handleExceptionAndConvertToGraphQLError(
+            error.originalError,
+            exceptionHandlerService,
+          );
+        }
+
+        return maskError(error, message, isDev);
+      },
+    },
+  };
+
+  if (environmentService.isDebugMode()) {
+    config.renderGraphiQL = () => {
+      return renderApolloPlayground({ path: 'metadata' });
+    };
+  }
+
+  return config;
+};

packages/twenty-server/src/metadata/metadata.module.ts

@@ -7,6 +7,7 @@ import { WorkspaceMigrationRunnerModule } from 'src/workspace/workspace-migratio
 import { WorkspaceMigrationModule } from 'src/metadata/workspace-migration/workspace-migration.module';
 import { metadataModuleFactory } from 'src/metadata/metadata.module-factory';
 import { ExceptionHandlerService } from 'src/integrations/exception-handler/exception-handler.service';
+import { EnvironmentService } from 'src/integrations/environment/environment.service';
 
 import { DataSourceModule } from './data-source/data-source.module';
 import { FieldMetadataModule } from './field-metadata/field-metadata.module';
@@ -16,8 +17,8 @@ import { RelationMetadataModule } from './relation-metadata/relation-metadata.mo
   imports: [
     GraphQLModule.forRootAsync<YogaDriverConfig>({
       driver: YogaDriver,
-      inject: [ExceptionHandlerService],
       useFactory: metadataModuleFactory,
+      inject: [EnvironmentService, ExceptionHandlerService],
     }),
     DataSourceModule,
     FieldMetadataModule,