show query variables in docs graphiql (#1373)

docs/_ext/graphiql.py

@@ -9,17 +9,27 @@ class GraphiQLDirective(Directive):
     required_arguments = 0
     optional_arguments = 0
     final_argument_whitespace = True
-    option_spec = {"query": str, "response": str, "endpoint": str, "view_only": str}
+    option_spec = {"query": str, "response": str, "variables": str, "endpoint": str, "view_only": str}
 
     GRAPHIQL_TEMPLATE = '''
 .. raw:: html
 
-   <div class="graphiql {{ if view_only }}view-only{{end}}">
+   <div class="graphiql {{ if view_only }}view-only{{end}} {{ if variables }}with-vars{{end}}">
    
 .. code-block:: graphql
 
    {{ query }}
+
+{{ if variables }}
    
+with variables:
+
+.. code-block:: json
+
+   {{ variables }}
+   
+{{ end }}
+ 
 .. raw:: html
    
    <div class="endpoint">
@@ -31,6 +41,10 @@ class GraphiQLDirective(Directive):
    <div class="response">
    {{ response }}
    </div>
+   <div class="variables">
+   {{ variables }}
+   </div>
+   
    </div>
 '''
 

docs/_static/hasura-custom.css

@@ -622,23 +622,28 @@ article ol ol {
 }
 
 .graphiql .query,
-.graphiql .response {
+.graphiql .response,
+.graphiql .variables {
   display: none;
 }
 
-.graphiql-container {
-  min-height: 300px;
+.graphiql .graphiql-container {
+  min-height: 325px;
   border: 1px solid #eee;
   -webkit-box-shadow: -1px 2px 20px 2px rgba(217,217,217,1);
   -moz-box-shadow: -1px 2px 20px 2px rgba(217,217,217,1);
   box-shadow: -1px 2px 20px 2px rgba(217,217,217,1);
 }
 
-.graphiql-container .topBarWrap {
+.graphiql.with-vars .graphiql-container {
+  min-height: 375px;
+}
+
+.graphiql .topBarWrap {
   height: 0;
 }
 
-.graphiql-container .execute-button-wrap {
+.graphiql .execute-button-wrap {
   z-index: 3;
   top: -2px;
   left: calc(50% - 50px);
@@ -646,37 +651,46 @@ article ol ol {
   height: 28px !important;
 }
 
-.graphiql-container .execute-button {
+.graphiql .execute-button {
   height: 28px !important;
   width: 28px !important;
 }
 
-.graphiql-container .execute-button svg {
+.graphiql .execute-button svg {
   position: relative;
   top: -3px;
   left: -3px;
 }
 
-.graphiql-container .CodeMirror pre {
+.graphiql .CodeMirror pre {
   padding: 0 15px;
 }
 
-.graphiql-container .CodeMirror-lines {
+.graphiql .CodeMirror-lines {
   padding: 15px 0 !important;
 }
 
-.graphiql-container .CodeMirror-gutter-wrapper,
-.graphiql-container .CodeMirror-gutters {
+.graphiql .CodeMirror-gutter-wrapper,
+.graphiql .CodeMirror-gutters {
   display: none;
 }
 
-.graphiql-container .title,
-.graphiql-container .docExplorerShow,
-.graphiql-container .toolbar,
-.graphiql-container .variable-editor {
+.graphiql .title,
+.graphiql .docExplorerShow,
+.graphiql .toolbar {
   display: none !important;
 }
 
+.graphiql:not(.with-vars) .variable-editor {
+  display: none !important;
+}
+
+.graphiql .variable-editor .variable-editor-title {
+  line-height: 12px;
+  font-size: 13px;
+  padding: 2px 10px;
+}
+
 .graphiql.view-only .execute-button {
   display: none !important;
 }

docs/_theme/djangodocs/layout.html

@@ -426,18 +426,27 @@
           const endpoint = target.getElementsByClassName("endpoint")[0].innerHTML.trim();
           const query = target.getElementsByClassName("query")[0].innerHTML.trim();
           const response = target.getElementsByClassName("response")[0].innerHTML.trim();
+          const variables = target.getElementsByClassName("variables")[0].innerHTML.trim();
 
           const graphiQLElement = React.createElement(GraphiQL, {
             fetcher: graphQLFetcher(endpoint),
             schema: null, // TODO: pass undefined if introspection supported
             query: query,
-            response: response
+            response: response,
+            variables: variables
           });
 
           ReactDOM.render(graphiQLElement, target);
         }
       };
 
+      const resizeGraphiQLVariableEditors = function() {
+        const graphiQLVariableEditors = $('.graphiql .variable-editor');
+        for (let i = 0; i < graphiQLVariableEditors.length; i++) {
+          graphiQLVariableEditors[i].style.height = '120px';
+        }
+      };
+
       // if graphiql elements present, load react/graphiql js files and setup graphiql
       if ($('.graphiql').length > 0) {
         const loadingStatus = {'react': false, 'reactDom': false, 'graphiQL': false};
@@ -454,6 +463,8 @@
             }
 
             setupGraphiQL();
+
+            resizeGraphiQLVariableEditors();
           }
         };
 

docs/graphql/manual/mutations/insert.rst

@@ -95,21 +95,17 @@ OR
         }
       }
     }
-
-with variables:
-
-.. code-block:: json
-
-  {
-    "objects": [
-      {
-        "id": 21,
-        "title": "Article 1",
-        "content": "Sample article content",
-        "author_id": 3
-      }
-    ]
-  }
+  :variables:
+    {
+      "objects": [
+        {
+          "id": 21,
+          "title": "Article 1",
+          "content": "Sample article content",
+          "author_id": 3
+        }
+      ]
+    }
 
 Insert multiple objects of the same type in the same mutation
 -------------------------------------------------------------

docs/graphql/manual/mutations/update.rst

@@ -201,14 +201,10 @@ Since the input is a json value, it should be provided through a variable.
         }
       }
     }
-
-with variables:
-
-.. code-block:: json
-
-   {
-     "value": { "key1": "value1" }
-   }
+  :variables:
+    {
+      "value": { "key1": "value1" }
+    }
 
 Prepend a json to a jsonb column
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -216,7 +212,7 @@ You can prepend any ``jsonb`` column with another json value by using the ``_pre
 
 Since the input is a json value, it should be provided through a variable.
 
-**Example:** Prepend the json ``{"key0": "value0}``to ``jsonb`` column ``extra_info`` of ``article`` table:
+**Example:** Prepend the json ``{"key0": "value0}`` to ``jsonb`` column ``extra_info`` of ``article`` table:
 
 .. graphiql::
   :view_only:
@@ -249,14 +245,10 @@ Since the input is a json value, it should be provided through a variable.
         }
       }
     }
-
-with variables:
-
-.. code-block:: json
-
-   {
-     "value": { "key0": "value0" }
-   }
+  :variables:
+    {
+      "value": { "key0": "value0" }
+    }
 
 Delete a top-level key from a jsonb column
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^