Merge pull request #18012 from github/graphql-explorer-query-params

Pass query params from URL to GraphQL Explorer

Author: sarahs

javascripts/explorer.js

@@ -1,5 +1,15 @@
+const explorerUrl = location.hostname === 'localhost'
+  ? 'http://localhost:3000'
+  : 'https://graphql.github.com/explorer'
 
+// 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)
+  }
 }

javascripts/search.js

@@ -7,12 +7,17 @@ let $searchResultsContainer
 let $searchOverlay
 let $searchInput
 
+let isExplorerPage
+
 // This is our default placeholder, but it can be localized with a <meta> tag
 let placeholder = 'Search topics, products...'
 let version
 let language
 
 export default function search () {
+  // We don't want to mess with query params intended for the GraphQL Explorer
+  isExplorerPage = Boolean(document.getElementById('graphiql'))
+
   // First, only initialize search if the elements are on the page
   $searchInputContainer = document.getElementById('search-input-container')
   $searchResultsContainer = document.getElementById('search-results-container')
@@ -51,7 +56,9 @@ export default function search () {
   searchWithYourKeyboard('#search-input-container input', '.ais-Hits-item')
 
   // If the user already has a query in the URL, parse it and search away
-  parseExistingSearch()
+  if (!isExplorerPage) {
+    parseExistingSearch()
+  }
 
   // If not on home page, decide if search panel should be open
   toggleSearchDisplay() // must come after parseExistingSearch
@@ -133,8 +140,9 @@ async function onSearch () {
   const query = $searchInput.value
 
   // Update the URL with the search parameters in the query string
+  // UNLESS this is the GraphQL Explorer page, where a query in the URL is a GraphQL query
   const pushUrl = new URL(location)
-  pushUrl.search = query ? new URLSearchParams({ query }) : ''
+  pushUrl.search = query && !isExplorerPage ? new URLSearchParams({ query }) : ''
   history.pushState({}, '', pushUrl)
 
   // If there's a query, call the endpoint

tests/browser/browser.js

@@ -281,3 +281,30 @@ describe('language banner', () => {
     }
   })
 })
+
+// The Explorer in the iFrame will not be accessible on localhost, but we can still
+// test the query param handling
+describe('GraphQL Explorer', () => {
+  it('preserves query strings on the Explorer page without opening search', async () => {
+    const queryString = `query {
+  viewer {
+    foo
+  }
+}`
+    // Encoded as: query%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20foo%0A%20%20%7D%0A%7D
+    const encodedString = encodeURIComponent(queryString)
+    const explorerUrl = 'http://localhost:4001/en/graphql/overview/explorer'
+
+    await page.goto(`${explorerUrl}?query=${encodedString}`)
+
+    // On non-Explorer pages, query params handled by search JS get form-encoded using `+` instead of `%20`.
+    // So on these pages, the following test will be false; but on the Explorer page, it should be true.
+    expect(page.url().endsWith(encodedString)).toBe(true)
+
+    // On non-Explorer pages, query params handled by search JS will populate in the search box and the `js-open`
+    // class is added. On these pages, the following test will NOT be null; but on the Explorer page, it should be null.
+    await page.waitForSelector('#search-results-container')
+    const searchResult = await page.$('#search-results-container.js-open')
+    expect(searchResult).toBeNull()
+  })
+})