feat: support setting explorer query on url

powerhouse-inc · Aug 26, 2024 · 4fce05a · 4fce05a
1 parent b80ece7
commit 4fce05a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/api/src/app.ts b/api/src/app.ts
@@ -92,7 +92,13 @@ export const createApp = (): { app: Express; router: express.Router } => {
     const basePath =
       process.env.BASE_PATH === '/' ? '' : process.env.BASE_PATH || '';
     const endpoint = `${basePath}${req.params.driveId !== undefined ? `/d/${req.params.driveId}` : '/drives'}`;
-    res.send(renderGraphqlPlayground(endpoint));
+
+    const { query } = req.query;
+    if (query && typeof query !== 'string') {
+      throw new Error('Invalid query');
+    }
+
+    res.send(renderGraphqlPlayground(endpoint, query));
   });
 
   // Hooks

diff --git a/api/src/graphql/playground.ts b/api/src/graphql/playground.ts
@@ -1,5 +1,6 @@
 export function renderGraphqlPlayground(
   url: string,
+  query?: string,
   headers: Record<string, string> = {}
 ): string {
   return `<!doctype html>
@@ -44,19 +45,32 @@ export function renderGraphqlPlayground(
       <body>
         <div id="graphiql">Loading...</div>
         <script>
-          const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-          const fetcher = GraphiQL.createFetcher({
-            url: '${url}',
-            headers: ${JSON.stringify(headers)},
-          });
-          const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
-          root.render(
-            React.createElement(GraphiQL, {
-              fetcher,
-              defaultEditorToolsVisibility: true,
-              plugins: [explorerPlugin],
-            }),
-          );
+            var fetcher = GraphiQL.createFetcher({
+                url: '${url}',
+                headers: ${JSON.stringify(headers)}
+            });
+            var defaultQuery = ${query ? `\`${query}\`` : undefined};
+
+            if (defaultQuery) {
+                var sessionQuery = localStorage.getItem("graphiql:query");
+                if (sessionQuery) {
+                    localStorage.setItem("graphiql:query", defaultQuery);
+                }
+            }
+
+            var explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+
+            function GraphiQLWithExplorer() {
+                return React.createElement(GraphiQL, {
+                fetcher: fetcher,
+                defaultEditorToolsVisibility: true,
+                plugins: [explorerPlugin],
+                defaultQuery
+                });
+            }
+
+            const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+            root.render(React.createElement(GraphiQLWithExplorer));
         </script>
       </body>
     </html>`;