Restore Apollo Explorer/Sandbox instead of GraphiQL

CarsonF · CarsonF · commit 771cfc3aa289 · 2024-10-24T12:38:35.000-05:00
Just one less variable for now.
diff --git a/src/core/graphql/apollo-explorer.ts b/src/core/graphql/apollo-explorer.ts
@@ -0,0 +1,35 @@
+import { stripIndent } from 'common-tags';
+import { titleCase } from 'title-case';
+
+interface Options {
+  graphRef?: string;
+  [key: string]: any;
+}
+
+export const apolloExplorer = (options: Options) => {
+  const { title, ...config } = options;
+  const product = config.graphRef ? 'explorer' : 'sandbox';
+  return stripIndent`
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <title>${title}</title>
+    </head>
+    <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
+    <div id="sandbox" style="height:100vh; width:100vw;"></div>
+    <script src="https://embeddable-${product}.cdn.apollographql.com/${
+    product === 'sandbox' ? '_latest' : 'v3'
+  }/embeddable-${product}.umd.production.min.js"></script>
+    <script>
+      var initialEndpoint = window.location.href;
+      var config = ${JSON.stringify(config)};
+      // https://www.apollographql.com/docs/apollo-sandbox
+      new window.Embedded${titleCase(product)}({
+        target: '#sandbox',
+        initialEndpoint,
+        ...config,
+      });
+    </script>
+    </html>
+  `;
+};
diff --git a/src/core/graphql/graphql.options.ts b/src/core/graphql/graphql.options.ts
@@ -19,6 +19,7 @@ import { GqlContextType, Session } from '~/common';
 import { getRegisteredScalars } from '~/common/scalars';
 import { ConfigService } from '../config/config.service';
 import { VersionService } from '../config/version.service';
+import { apolloExplorer } from './apollo-explorer';
 import { isGqlContext } from './gql-context.host';
 import { GraphqlTracingPlugin } from './graphql-tracing.plugin';
 
@@ -41,6 +42,7 @@ export class GraphqlOptions implements GqlOptionsFactory {
     if (version.hash) {
       process.env.APOLLO_SERVER_USER_VERSION = version.hash;
     }
+    const graphRef = process.env.APOLLO_GRAPH_REF;
 
     const scalars = mapKeys.fromList(
       getRegisteredScalars(),
@@ -52,10 +54,20 @@ export class GraphqlOptions implements GqlOptionsFactory {
       path: '/graphql/:opName?',
       autoSchemaFile: 'schema.graphql',
       graphiql: {
-        title: 'CORD API',
+        title: graphRef ?? 'CORD@local',
         defaultEditorToolsVisibility: false,
         credentials: 'include',
       },
+      renderGraphiQL: () =>
+        apolloExplorer({
+          title: graphRef ?? 'CORD@local',
+          graphRef: graphRef,
+          endpointIsEditable: false,
+          hideCookieToggle: true,
+          initialState: {
+            includeCookies: true,
+          },
+        }),
       context: this.context,
       maskedErrors: false, // Errors are formatted in plugin
       sortSchema: true,
