Update GraphiQL

sadv1r · Oct 19, 2023 · 9cded18 · 9cded18
1 parent ead11ee
commit 9cded18
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ graphql:
            url
         }
       }
+    default-editor-tools-visibility: VARIABLES
     variables:
       id: 1
     headers:

diff --git a/...v1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java b/...v1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java
@@ -27,6 +27,7 @@ public RouterFunction<ServerResponse> reactiveGraphiQlRouterFunction(GraphiqlPro
                     .modelAttribute("cdnHost", properties.getCdn().getHost())
                     .modelAttribute("serverPath", serverPath)
                     .modelAttribute("query", properties.getQuery())
+                    .modelAttribute("defaultEditorToolsVisibility", properties.getDefaultEditorToolsVisibility())
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .build();

diff --git a/.../sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java b/.../sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java
@@ -25,6 +25,7 @@ public RouterFunction<ServerResponse> graphiQlRouterFunction(GraphiqlProperties
                     .modelAttribute("cdnHost", properties.getCdn().getHost())
                     .modelAttribute("serverPath", serverPath)
                     .modelAttribute("query", properties.getQuery())
+                    .modelAttribute("defaultEditorToolsVisibility", properties.getDefaultEditorToolsVisibility())
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .build();

diff --git a/.../main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java b/.../main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java
@@ -25,6 +25,8 @@ public class GraphiqlProperties {
 
     private String query;
 
+    private DefaultEditorTollsVisibility defaultEditorToolsVisibility = DefaultEditorTollsVisibility.SHOWN;
+
     private Map<String, String> variables;
 
     private Map<String, String> headers;
@@ -55,6 +57,14 @@ public void setQuery(String query) {
         this.query = readIfPath(query);
     }
 
+    public DefaultEditorTollsVisibility getDefaultEditorToolsVisibility() {
+        return defaultEditorToolsVisibility;
+    }
+
+    public void setDefaultEditorToolsVisibility(DefaultEditorTollsVisibility defaultEditorToolsVisibility) {
+        this.defaultEditorToolsVisibility = defaultEditorToolsVisibility;
+    }
+
     public Map<String, String> getVariables() {
         return variables;
     }
@@ -95,8 +105,24 @@ private static String readIfPath(String query) {
         return query;
     }
 
-    public enum Cdn {
+    public enum DefaultEditorTollsVisibility {
+        SHOWN(true),
+        HIDDEN(false),
+        VARIABLES("'variables'"),
+        HEADERS("'headers'");
+
+        private final Object value;
 
+        DefaultEditorTollsVisibility(Object value) {
+            this.value = value;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+    }
+
+    public enum Cdn {
         JSDELIVR,
         UNPKG;
 

diff --git a/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html b/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
+    <title>GraphiQL</title>
     <style>
         body {
             height: 100%;
@@ -14,31 +15,30 @@
         }
     </style>
 
-    <script crossorigin th:src="|${cdnHost}/react@17/umd/react.development.js|"></script>
-    <script crossorigin th:src="|${cdnHost}/react-dom@17/umd/react-dom.development.js|"></script>
+    <script crossorigin th:src="|${cdnHost}/react@18/umd/react.development.js|"></script>
+    <script crossorigin th:src="|${cdnHost}/react-dom@18/umd/react-dom.development.js|"></script>
 
+    <script th:src="|${cdnHost}/graphiql/graphiql.min.js|" type="application/javascript"></script>
     <link rel="stylesheet" th:href="|${cdnHost}/graphiql/graphiql.min.css|"/>
 </head>
 <body>
 <div id="graphiql">Loading...</div>
-<script th:src="|${cdnHost}/graphiql/graphiql.min.js|" type="application/javascript"></script>
-
 <script th:inline="javascript">
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+    root.render(
         React.createElement(GraphiQL, {
             fetcher: GraphiQL.createFetcher({
                 url: '[(${serverPath})]',
             }),
             query: [[${query}]],
-            defaultVariableEditorOpen: true,
+            defaultEditorToolsVisibility: [(${defaultEditorToolsVisibility.value})],
             headerEditorEnabled: true,
             shouldPersistHeaders: true,
             // variables: '[[${variables}]]',
             variables: JSON.stringify([[${variables}]], undefined, 2),
             // headers: '[[${headers}]]',
             headers: JSON.stringify([[${headers}]], undefined, 2),
         }),
-        document.getElementById('graphiql'),
     );
 </script>
 </body>

diff --git a/samples/web-sample/src/main/resources/application.yaml b/samples/web-sample/src/main/resources/application.yaml
@@ -8,6 +8,7 @@ spring:
             url
           }
         }
+      default-editor-tools-visibility: VARIABLES
       variables:
         id: 1
       headers:

diff --git a/samples/webflux-sample/src/main/resources/application.yaml b/samples/webflux-sample/src/main/resources/application.yaml
@@ -2,6 +2,7 @@ spring:
   graphql:
     graphiql:
       query: example/query.graphql
+      default-editor-tools-visibility: VARIABLES
       variables:
         id: 1
       headers: