Merge branch 'sh-revert-graphiql-version' into 'master'

Make /-/graphql-explorer work again See merge request gitlab-org/gitlab-ce!32952

Merge branch 'sh-revert-graphiql-version' into 'master'
Make /-/graphql-explorer work again See merge request gitlab-org/gitlab-ce!32952
10c440c1 · Kamil Trzciński · 11f5e7fe · e078d515 · 10c440c1 · 10c440c1
Commit 10c440c1 authored Sep 12, 2019 by Kamil Trzciński
Hide whitespace changes
Inline Side-by-side

Showing with 95 additions and 13 deletions

Gemfile Gemfile +3 -2

Gemfile.lock Gemfile.lock +2 -2

app/views/graphiql/rails/editors/show.html.erb app/views/graphiql/rails/editors/show.html.erb +90 -9

No files found.
--- a/Gemfile
+++ b/Gemfile
@@ -84,9 +84,10 @@ gem 'rack-cors', '~> 1.0.0', require: 'rack/cors'

 # GraphQL API
 gem 'graphql', '~> 1.9.11'
-# TODO: remove app/views/graphiql/rails/editors/show.html.erb when https://github.com/rmosolgo/graphiql-rails/pull/71 will be released
+# NOTE: graphiql-rails v1.5+ doesn't work: https://gitlab.com/gitlab-org/gitlab-ce/issues/67293
+# TODO: remove app/views/graphiql/rails/editors/show.html.erb when https://github.com/rmosolgo/graphiql-rails/pull/71 is released:
 # https://gitlab.com/gitlab-org/gitlab-ce/issues/67263
-gem 'graphiql-rails', '~> 1.7.0'
+gem 'graphiql-rails', '~> 1.4.10'
 gem 'apollo_upload_server', '~> 2.0.0.beta3'
 gem 'graphql-docs', '~> 1.6.0', group: [:development, :test]


--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -402,7 +402,7 @@ GEM
      rake (~> 12)
    grape_logging (1.7.0)
      grape
-    graphiql-rails (1.7.0)
+    graphiql-rails (1.4.10)
      railties
      sprockets-rails
    graphql (1.9.11)
@@ -1150,7 +1150,7 @@ DEPENDENCIES
  grape-entity (~> 0.7.1)
  grape-path-helpers (~> 1.1)
  grape_logging (~> 1.7)
-  graphiql-rails (~> 1.7.0)
+  graphiql-rails (~> 1.4.10)
  graphql (~> 1.9.11)
  graphql-docs (~> 1.6.0)
  grpc (~> 1.19.0)

--- a/app/views/graphiql/rails/editors/show.html.erb
+++ b/app/views/graphiql/rails/editors/show.html.erb
 <!DOCTYPE html>
 <html>
  <head>
-    <title><%= GraphiQL::Rails.config.title || 'GraphiQL' %></title>
-
+    <title>GraphiQL</title>
    <%= stylesheet_link_tag("graphiql/rails/application") %>
+    <%# TODO: This file was included to fix a CSP failure. Please remove when https://github.com/rmosolgo/graphiql-rails/pull/71 will be released %>
    <%= javascript_include_tag("graphiql/rails/application", nonce: true) %>
  </head>
  <body>
-    <%= content_tag :div, 'Loading...', id: 'graphiql-container', data: {
-      graphql_endpoint_path: graphql_endpoint_path,
-      initial_query: GraphiQL::Rails.config.initial_query,
-      logo: GraphiQL::Rails.config.logo,
-      headers: GraphiQL::Rails.config.resolve_headers(self),
-      query_params: GraphiQL::Rails.config.query_params
-    } %>
+    <div id="graphiql-container">
+      Loading...
+    </div>
+    <%= javascript_tag nonce: true do -%>
+    var parameters = {};
+
+    <% if GraphiQL::Rails.config.query_params %>
+    // Parse the search string to get url parameters.
+    var search = window.location.search;
+    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.
+     }
+    }
+    // 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 updateURL() {
+     var newSearch = '?' + Object.keys(parameters).map(function (key) {
+       return encodeURIComponent(key) + '=' +
+         encodeURIComponent(parameters[key]);
+     }).join('&');
+     history.replaceState(null, null, newSearch);
+    }
+    <% end %>
+
+    // Defines a GraphQL fetcher using the fetch API.
+    var graphQLEndpoint = "<%= graphql_endpoint_path %>";
+    function graphQLFetcher(graphQLParams) {
+      return fetch(graphQLEndpoint, {
+        method: 'post',
+        headers: <%= raw JSON.pretty_generate(GraphiQL::Rails.config.resolve_headers(self)) %>,
+        body: JSON.stringify(graphQLParams),
+        credentials: 'include',
+      }).then(function(response) {
+        return response.text();
+      }).then(function(text) {
+        try {
+            return JSON.parse(text);
+        } catch(error) {
+            return {
+              "message": "The server responded with invalid JSON, this is probably a server-side error",
+              "response": text,
+            };
+        }
+      })
+    }
+
+    <% if GraphiQL::Rails.config.initial_query %>
+    var defaultQuery = "<%= GraphiQL::Rails.config.initial_query.gsub("\n", '\n').gsub('"', '\"').html_safe %>";
+    <% else %>
+    var defaultQuery = undefined
+    <% end %>
+
+    // Render <GraphiQL /> into the body.
+    ReactDOM.render(
+      React.createElement(GraphiQL, {
+        fetcher: graphQLFetcher,
+        defaultQuery: defaultQuery,
+        <% if GraphiQL::Rails.config.query_params %>
+        query: parameters.query,
+        variables: parameters.variables,
+        onEditQuery: onEditQuery,
+        onEditVariables: onEditVariables
+        <% end %>
+      }),
+      document.getElementById("graphiql-container")
+    );
+    <% end -%>
  </body>
 </html>