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

packages/twenty-server/src/graphql-config.service.ts

@@ -21,6 +21,8 @@ import { Workspace } from 'src/core/workspace/workspace.entity';
 import { WorkspaceFactory } from 'src/workspace/workspace.factory';
 import { ExceptionHandlerService } from 'src/integrations/exception-handler/exception-handler.service';
 import { handleExceptionAndConvertToGraphQLError } from 'src/filters/utils/global-exception-handler.util';
+import { renderApolloPlayground } from 'src/workspace/utils/render-apollo-playground.util';
+import { EnvironmentService } from 'src/integrations/environment/environment.service';
 
 @Injectable()
 export class GraphQLConfigService
@@ -29,13 +31,14 @@ export class GraphQLConfigService
   constructor(
     private readonly tokenService: TokenService,
     private readonly exceptionHandlerService: ExceptionHandlerService,
+    private readonly environmentService: EnvironmentService,
     private readonly moduleRef: ModuleRef,
   ) {}
 
   createGqlOptions(): YogaDriverConfig {
     const exceptionHandlerService = this.exceptionHandlerService;
-
-    return {
+    const isDebugMode = this.environmentService.isDebugMode();
+    const config: YogaDriverConfig = {
       context: ({ req }) => ({ req }),
       autoSchemaFile: true,
       include: [CoreModule],
@@ -90,6 +93,14 @@ export class GraphQLConfigService
       resolvers: { JSON: GraphQLJSON },
       plugins: [],
     };
+
+    if (isDebugMode) {
+      config.renderGraphiQL = () => {
+        return renderApolloPlayground();
+      };
+    }
+
+    return config;
   }
 
   async createSchema(

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,

packages/twenty-server/src/workspace/utils/render-apollo-playground.util.ts

@@ -0,0 +1,25 @@
+interface ApolloPlaygroundOptions {
+  path?: string;
+}
+
+export const renderApolloPlayground = ({
+  path = 'graphql',
+}: ApolloPlaygroundOptions = {}) => {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+      <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
+      <div id="sandbox" style="height:100vh; width:100vw;"></div>
+      <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
+      <script>
+      new window.EmbeddedSandbox({
+        target: "#sandbox",
+        // Pass through your server href if you are embedding on an endpoint.
+        // Otherwise, you can pass whatever endpoint you want Sandbox to start up with here.
+        initialEndpoint: "http://localhost:3000/${path}",
+      });
+      // advanced options: https://www.apollographql.com/docs/studio/explorer/sandbox#embedding-sandbox
+      </script>
+      </body>
+    </html>`;
+};