use postMessage to send query params in URL as Explorer query

sarahs · sarahs · commit 2a7586221a17 · 2021-02-26T09:29:51.000-05:00
diff --git a/javascripts/explorer.js b/javascripts/explorer.js
@@ -1,5 +1,15 @@
+const explorerUrl = process.env.NODE_ENV === 'production'
+  ? 'https://graphql.github.com/explorer'
+  : 'http://localhost:3000'
 
+// Pass non-search query params to Explorer app via the iFrame
 export default function () {
-  // TODO support "Run in Explorer" links in GraphQL guides
-  // will need to handle query params separately from search queries
+  const graphiqlExplorer = document.getElementById('graphiql')
+  const queryString = window.location.search
+
+  if (!(queryString && graphiqlExplorer)) return
+
+  window.onload = () => {
+    graphiqlExplorer.contentWindow.postMessage(queryString, explorerUrl)
+  }
 }
