Update GraphiQL (#1069)

* Update GraphiQL Source * pass through request headers from header box --------- Co-authored-by: Christian Legnitto <[email protected]>
graphql-rust · Aug 28, 2023 · b375146 · b375146
1 parent 421c8c9
commit b375146
Showing 1 changed file with 46 additions and 32 deletions.
diff --git a/juniper/src/http/graphiql.rs b/juniper/src/http/graphiql.rs
@@ -20,12 +20,16 @@ pub fn graphiql_source(
 
     let stylesheet_source = r#"
     <style>
-        html, body, #app {
-            height: 100%;
-            margin: 0;
-            overflow: hidden;
-            width: 100%;
-        }
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
     </style>
     "#;
     let fetcher_source = r#"
@@ -50,33 +54,37 @@ pub fn graphiql_source(
             return null
         }
 
-        function graphQLFetcher(params) {
-            return fetch(GRAPHQL_URL, {
-                method: 'post',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json',
+        function graphQLFetcher(graphQLParams, opts) {
+            const { headers = {} } = opts;
+
+            return fetch(
+                GRAPHQL_URL,
+                {
+                    method: 'post',
+                    headers: {
+                        Accept: 'application/json',
+                        'Content-Type': 'application/json',
+                        ...headers,
+                    },
+                    body: JSON.stringify(graphQLParams),
+                    credentials: 'omit',
                 },
-                credentials: 'include',
-                body: JSON.stringify(params)
-            }).then(function (response) {
-                return response.text();
-            }).then(function (body) {
-                try {
-                    return JSON.parse(body);
-                } catch (error) {
-                    return body;
-                }
+            ).then(function (response) {
+                return response.json().catch(function () {
+                    return response.text();
+                });
             });
         }
 
         var fetcher = usingSubscriptions ? window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher) : graphQLFetcher;
 
         ReactDOM.render(
             React.createElement(GraphiQL, {
-                fetcher,
+              fetcher,
+              defaultVariableEditorOpen: true,
             }),
-            document.querySelector('#app'));
+            document.getElementById('graphiql'),
+        );
     </script>
     "#;
 
@@ -87,16 +95,22 @@ pub fn graphiql_source(
 <head>
     <title>GraphQL</title>
     {stylesheet_source}
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/graphiql.min.css">
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+    ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
 </head>
 <body>
-    <div id="app"></div>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
-    <script src="//unpkg.com/[email protected]/browser/client.js"></script>
-    <script src="//unpkg.com/[email protected]/browser/client.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/graphiql.min.js"></script>
+    <div id="graphiql">Loading...</div>
+    <script
+        src="https://unpkg.com/graphiql/graphiql.min.js"
+        type="application/javascript"
+    ></script>
     <script>var GRAPHQL_URL = '{graphql_url}';</script>
     <script>var usingSubscriptions = {using_subscriptions};</script>
     <script>var GRAPHQL_SUBSCRIPTIONS_URL = '{graphql_subscriptions_url}';</script>