From 58715100a03dd54b687b60bffa40214e8e5b964d Mon Sep 17 00:00:00 2001 From: Rikin Kachhia Date: Tue, 15 Jan 2019 20:04:39 +0530 Subject: [PATCH] show query variables in docs graphiql (#1373) --- docs/_ext/graphiql.py | 18 ++++++++-- docs/_static/hasura-custom.css | 44 ++++++++++++++++-------- docs/_theme/djangodocs/layout.html | 13 ++++++- docs/graphql/manual/mutations/insert.rst | 26 ++++++-------- docs/graphql/manual/mutations/update.rst | 26 +++++--------- 5 files changed, 77 insertions(+), 50 deletions(-) diff --git a/docs/_ext/graphiql.py b/docs/_ext/graphiql.py index 9b272903e45..da2d75d9a72 100644 --- a/docs/_ext/graphiql.py +++ b/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 -
+
.. code-block:: graphql {{ query }} + +{{ if variables }} +with variables: + +.. code-block:: json + + {{ variables }} + +{{ end }} + .. raw:: html
@@ -31,6 +41,10 @@ class GraphiQLDirective(Directive):
{{ response }}
+
+ {{ variables }} +
+
''' diff --git a/docs/_static/hasura-custom.css b/docs/_static/hasura-custom.css index 9962aeb87b4..d65093e6443 100644 --- a/docs/_static/hasura-custom.css +++ b/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; } diff --git a/docs/_theme/djangodocs/layout.html b/docs/_theme/djangodocs/layout.html index 5cef5aeabc1..cb27dcbce92 100644 --- a/docs/_theme/djangodocs/layout.html +++ b/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(); } }; diff --git a/docs/graphql/manual/mutations/insert.rst b/docs/graphql/manual/mutations/insert.rst index 2bd6d28e303..0c9ddfabb83 100644 --- a/docs/graphql/manual/mutations/insert.rst +++ b/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 ------------------------------------------------------------- diff --git a/docs/graphql/manual/mutations/update.rst b/docs/graphql/manual/mutations/update.rst index 85ebdab5baa..d4b6faf59ae 100644 --- a/docs/graphql/manual/mutations/update.rst +++ b/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 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^