e2e test for implicit fragments, readme, handle refresh

Author: acao

e2e-tests/development-runtime/cypress/integration/functionality/implicit-fragments.js

@@ -0,0 +1,20 @@
+const endpoints = [`/___graphql`, `/_graphql`, `/___graphiql`]
+
+const testQueryString = `?query=${encodeURIComponent(`{
+  site {
+      ...TestingFragment
+  }
+}`)}`
+
+describe(`The GraphQL endpoint`, () => {
+  
+    it(`Should execute operations with implicit fragments`, () => {
+      // prefill query from query string
+      cy.visit(endpoint + testQueryString)
+      cy.get(`.graphiql-container`).should(`be.visible`)
+      cy.get(`.execute-button`).click()
+      cy.get(`.result-window .CodeMirror-code`).contains(
+        `Gatsby Default Starter`
+      )
+    })
+})

e2e-tests/development-runtime/src/utils/fragments.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import { graphql } from "gatsby"
+
+export const GatsbyImageSharpFixed = graphql`
+  fragment TestingFragment on Site {
+    siteMetadata {
+      title
+    }
+  }
+`

packages/gatsby-graphiql-explorer/README.md

@@ -10,6 +10,7 @@ _Note:_ accessible at `http://localhost:8000/___graphql` after running `gatsby d
 
 - Offline support - for when you need to work on your excellent Gatsby app on a plane, train, or elsewhere off the grid
 - [GraphiQL Explorer][graphiql-explorer] - an interactive explorer plugin to visually create and interact with the GraphQL schema
+- Support for implied fragments - whether provided by you, core or plugins. Autocompletion, validation & operation execution are all covered!
 - _All_ the expected features you know and love from [GraphiQL][graphiql]
 
 [graphiql]: https://github.com/graphql/graphiql

packages/gatsby-graphiql-explorer/package.json

@@ -42,7 +42,7 @@
     "core-js": "^3.8.1",
     "cross-env": "^7.0.3",
     "css-loader": "^1.0.1",
-    "graphiql": "^1.3.1",
+    "graphiql": "^1.3.2",
     "graphiql-code-exporter": "^3.0.3",
     "graphiql-explorer": "^0.6.2",
     "html-webpack-plugin": "^3.2.0",

packages/gatsby-graphiql-explorer/src/app/app.js

@@ -69,6 +69,11 @@ function graphQLFetcher(graphQLParams) {
   })
 }
 
+const fetchFragments = async () =>
+  fetch(`/___graphiql/fragments`)
+    .catch(err => console.error(`Error fetching external fragments: \n${err}`))
+    .then(response => response.json())
+
 // When the query and variables string is edited, update the URL bar so
 // that it can be easily shared.
 function onEditVariables(newVariables) {
@@ -166,6 +171,7 @@ const storedCodeExporterPaneState =
 class App extends React.Component {
   state = {
     schema: null,
+    externalFragments: null,
     query: DEFAULT_QUERY,
     variables: DEFAULT_VARIABLES,
     explorerIsOpen: storedExplorerPaneState,
@@ -316,11 +322,21 @@ class App extends React.Component {
         Authorization: this.state.refreshToken,
       }
     }
+    fetchFragments().then(externalFragments => {
+      this.setState({ externalFragments })
+    })
+
     return fetch(`/__refresh`, options)
   }
 
   render() {
-    const { query, variables, schema, codeExporterIsOpen } = this.state
+    const {
+      query,
+      variables,
+      schema,
+      codeExporterIsOpen,
+      externalFragments: externalFragmentsState,
+    } = this.state
     const { externalFragments } = this.props
     const codeExporter = codeExporterIsOpen ? (
       <CodeExporter
@@ -352,7 +368,7 @@ class App extends React.Component {
           onEditQuery={this._handleEditQuery}
           onEditVariables={onEditVariables}
           onEditOperationName={onEditOperationName}
-          externalFragments={externalFragments}
+          externalFragments={externalFragmentsState || externalFragments}
         >
           <GraphiQL.Toolbar>
             <GraphiQL.Button
@@ -393,11 +409,9 @@ class App extends React.Component {
 // crude way to fetch fragments on boot time
 // it won't hot reload fragments (refresh requires)
 // but good enough for initial integration
-fetch(`/___graphiql/fragments`)
-  .then(response => response.json())
-  .then(externalFragments => {
-    ReactDOM.render(
-      <App externalFragments={externalFragments} />,
-      document.getElementById(`root`)
-    )
-  })
+fetchFragments().then(externalFragments => {
+  ReactDOM.render(
+    <App externalFragments={externalFragments} />,
+    document.getElementById(`root`)
+  )
+})

yarn.lock

@@ -12295,7 +12295,7 @@ graphiql-explorer@^0.6.2:
   resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.6.2.tgz#ea81a8770e3e68c2a97fe849b294bad94ed509e3"
   integrity sha512-hYSM+TI/0IAXltMOL7YXrvnA5xrKoDjjN7qiksxca2DY7yu46cyHVHG0IKIrBozMDBQLvFOhQMPrzplErwVZ1g==
 
-graphiql@^1.3.1:
+graphiql@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-1.3.2.tgz#fc9123ec63e587e02699983c617f9338bc09cb40"
   integrity sha512-huo1Uxkcb1wpCGlDjE1N5X3dUrBTnOlj7/VgXwFUF0mcq/l/5RBTYx49pAc92DXO7rx715ZtUtAL60PxzGeh+w==