Upgrade GraphiQL to 1.0.6 including header support

fix #441
graphql-java-kickstart · Nov 18, 2020 · f7c4489 · f7c4489
1 parent 2a81f68
commit f7c4489
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 152 deletions.
diff --git a/example-graphql-tools/src/main/resources/application.yml b/example-graphql-tools/src/main/resources/application.yml
@@ -9,6 +9,9 @@ graphql:
 graphiql:
   headers:
     Authorization: "Bearer 05bd9a5f3fe0408f89520946b0fe1b06"
+  props:
+    variables:
+      headerEditorEnabled: true
 logging:
   level:
     com:

diff --git a/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html b/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html
@@ -1,164 +1,165 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
-    <meta name="robots" content="noindex"/>
-    <meta name="referrer" content="origin"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>${pageTitle}</title>
-    <style>
-        body {
-            height: 100vh;
-            margin: 0;
-            overflow: hidden;
-        }
-
-        #splash {
-            color: #333;
-            display: flex;
-            flex-direction: column;
-            font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
-            height: 100vh;
-            justify-content: center;
-            text-align: center;
-        }
-
-    </style>
-
-    <script src="${es6PromiseJsUrl}"></script>
-    <script src="${fetchJsUrl}"></script>
-    <script src="${reactJsUrl}"></script>
-    <script src="${reactDomJsUrl}"></script>
-
-    <link rel="stylesheet" href="${graphiqlCssUrl}"/>
-    <link rel="icon" type="image/x-icon" href="${pageFavicon}">
-    <script src="${graphiqlJsUrl}"></script>
-    <script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
-    <script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
-</head>
-<body>
-<div id="splash">
-    Loading&hellip;
-</div>
-<script>
-    var editorThemeCss = '${editorThemeCss}'
-    if (editorThemeCss !== '') {
-        var link = document.createElement( "link" );
-        link.href = editorThemeCss;
-        link.type = "text/css";
-        link.rel = "stylesheet";
-        link.media = "screen,print";
-
-        document.getElementsByTagName( "head" )[0].appendChild( link );
+  <meta charset="utf-8" />
+  <meta name="robots" content="noindex" />
+  <meta name="referrer" content="origin" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${pageTitle}</title>
+  <style>
+    body {
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
     }
 
-    // Parse the search string to get url parameters.
-    var search = window.location.search;
-    var parameters = {};
-    search.substr(1).split('&').forEach(function (entry) {
-        var eq = entry.indexOf('=');
-        if (eq >= 0) {
-            parameters[decodeURIComponent(entry.slice(0, eq))] =
-                decodeURIComponent(entry.slice(eq + 1));
-        }
-    });
-
-    // if variables was provided, try to format it.
-    if (parameters.variables) {
-        try {
-            parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2);
-        } catch (e) {
-            // Do nothing, we want to display the invalid JSON as a string, rather
-            // than present an error.
-        }
+    #splash {
+      color: #333;
+      display: flex;
+      flex-direction: column;
+      font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
+      height: 100vh;
+      justify-content: center;
+      text-align: center;
     }
 
-    // When the query and variables string is edited, update the URL bar so
-    // that it can be easily shared
-    function onEditQuery(newQuery) {
-        parameters.query = newQuery;
-        updateURL();
-    }
+  </style>
 
-    function onEditVariables(newVariables) {
-        parameters.variables = newVariables;
-        updateURL();
-    }
-
-    function onEditOperationName(newOperationName) {
-        parameters.operationName = newOperationName;
-        updateURL();
-    }
-
-    function updateURL() {
-        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
-            return Boolean(parameters[key]);
-        }).map(function (key) {
-            return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]);
-        }).join('&');
-        history.replaceState(null, null, newSearch);
-    }
+  <script src="${es6PromiseJsUrl}"></script>
+  <script src="${fetchJsUrl}"></script>
+  <script src="${reactJsUrl}"></script>
+  <script src="${reactDomJsUrl}"></script>
 
-    var headers = ${headers};
-
-    // Defines a GraphQL fetcher using the fetch API. You're not required to
-    // use fetch, and could instead implement graphQLFetcher however you like,
-    // as long as it returns a Promise or Observable.
-    function graphQLFetcher(graphQLParams) {
-        // This example expects a GraphQL server at the path /graphql.
-        // Change this to point wherever you host your GraphQL server.
-        return fetch('${graphqlEndpoint}', {
-            method: 'post',
-            headers: headers,
-            body: JSON.stringify(graphQLParams),
-            credentials: 'include'
-        }).then(function (response) {
-            return response.text();
-        }).then(function (responseBody) {
-            try {
-                return JSON.parse(responseBody);
-            } catch (error) {
-                return responseBody;
-            }
-        });
-    }
-
-    var loc = window.location, newUri;
-
-    if (loc.protocol === "https:") {
-        newUri = "wss:";
-    } else {
-        newUri = "ws:";
-    }
-    newUri += "//" + loc.host;
-    newUri += "${subscriptionsEndpoint}";
-
-    var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(newUri, {
-        reconnect: ${subscriptionClientReconnect},
-        timeout: ${subscriptionClientTimeout}
-    });
-    var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
-
-    var props = ${props};
-    if (parameters.query) {
-        props.query = parameters.query;
-    }
-    if (parameters.variables) {
-        props.variables = parameters.variables;
+  <link rel="stylesheet" href="${graphiqlCssUrl}" />
+  <link rel="icon" type="image/x-icon" href="${pageFavicon}">
+  <script src="${graphiqlJsUrl}"></script>
+  <script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
+  <script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
+</head>
+<body>
+<div id="splash">
+  Loading&hellip;
+</div>
+<script>
+  var editorThemeCss = '${editorThemeCss}'
+  if (editorThemeCss !== '') {
+    var link = document.createElement("link")
+    link.href = editorThemeCss
+    link.type = "text/css"
+    link.rel = "stylesheet"
+    link.media = "screen,print"
+
+    document.getElementsByTagName("head")[0].appendChild(link)
+  }
+
+  // Parse the search string to get url parameters.
+  var search = window.location.search
+  var parameters = {}
+  search.substr(1).split('&').forEach(function(entry) {
+    var eq = entry.indexOf('=')
+    if (eq >= 0) {
+      parameters[decodeURIComponent(entry.slice(0, eq))] =
+          decodeURIComponent(entry.slice(eq + 1))
     }
-    if (parameters.operationName) {
-        props.operationName = parameters.operationName;
+  })
+
+  // if variables was provided, try to format it.
+  if (parameters.variables) {
+    try {
+      parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2)
+    } catch (e) {
+      // Do nothing, we want to display the invalid JSON as a string, rather
+      // than present an error.
     }
-    props.fetcher = subscriptionsFetcher;
-    props.onEditQuery = onEditQuery;
-    props.onEditVariables = onEditVariables;
-    props.onEditOperationName = onEditOperationName;
-
-    // Render <GraphiQL /> into the body.
-    ReactDOM.render(
-        React.createElement(GraphiQL, props),
-        document.body
-    );
+  }
+
+  // When the query and variables string is edited, update the URL bar so
+  // that it can be easily shared
+  function onEditQuery(newQuery) {
+    parameters.query = newQuery
+    updateURL()
+  }
+
+  function onEditVariables(newVariables) {
+    parameters.variables = newVariables
+    updateURL()
+  }
+
+  function onEditOperationName(newOperationName) {
+    parameters.operationName = newOperationName
+    updateURL()
+  }
+
+  function updateURL() {
+    var newSearch = '?' + Object.keys(parameters).filter(function(key) {
+      return Boolean(parameters[key])
+    }).map(function(key) {
+      return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
+    }).join('&')
+    history.replaceState(null, null, newSearch)
+  }
+
+  var headers = ${headers}
+
+  // Defines a GraphQL fetcher using the fetch API. You're not required to
+  // use fetch, and could instead implement graphQLFetcher however you like,
+  // as long as it returns a Promise or Observable.
+  function graphQLFetcher(graphQLParams) {
+    // This example expects a GraphQL server at the path /graphql.
+    // Change this to point wherever you host your GraphQL server.
+    return fetch('${graphqlEndpoint}', {
+      method: 'post',
+      headers: headers,
+      body: JSON.stringify(graphQLParams),
+      credentials: 'include'
+    }).then(function(response) {
+      return response.text()
+    }).then(function(responseBody) {
+      try {
+        return JSON.parse(responseBody)
+      } catch (error) {
+        return responseBody
+      }
+    })
+  }
+
+  var loc = window.location, newUri
+
+  if (loc.protocol === "https:") {
+    newUri = "wss:"
+  } else {
+    newUri = "ws:"
+  }
+  newUri += "//" + loc.host
+  newUri += "${subscriptionsEndpoint}"
+
+  var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(newUri, {
+    reconnect: ${subscriptionClientReconnect},
+    timeout: ${subscriptionClientTimeout}
+  })
+  var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher)
+
+  var props = ${props}
+  if (parameters.query) {
+    props.query = parameters.query
+  }
+  if (parameters.variables) {
+    props.variables = parameters.variables
+  }
+  if (parameters.operationName) {
+    props.operationName = parameters.operationName
+  }
+  props.fetcher = subscriptionsFetcher
+  props.onEditQuery = onEditQuery
+  props.onEditVariables = onEditVariables
+  props.onEditOperationName = onEditOperationName
+
+  console.debug(props)
+  // Render <GraphiQL /> into the body.
+  ReactDOM.render(
+      React.createElement(GraphiQL, props),
+      document.body
+  )
 
 </script>
 </body>

diff --git a/...hiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.css b/...hiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.css
diff --git a/graphiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.js b/graphiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.js