Merge pull request #113 from Ensembl/upgrade_ariadne

Upgrade Ariadne (Moving away from GraphQL Playground to GraphiQL2)
Ensembl · May 11, 2023 · 2d87c4b · 2d87c4b
2 parents b816d1f + 292c652
commit 2d87c4b
Show file tree

Hide file tree

Showing 4 changed files with 245 additions and 4 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -59,12 +59,12 @@ test:
 build:
   extends: .build
   only:
-    - main
+    - develop
 
 # deploy application to k8s cluster for k8s-deploy branch
 deploy:
   extends: .deploy
   environment:
     name: thoas-graphql
   only:
-    - main
+    - develop
diff --git a/graphql_service/server.py b/graphql_service/server.py
@@ -16,7 +16,10 @@
 from typing import Optional
 
 from ariadne.asgi import GraphQL
+from ariadne.asgi.handlers import GraphQLHTTPHandler
 from ariadne.contrib.tracing.apollotracing import ApolloTracingExtension
+from ariadne.explorer import ExplorerGraphiQL, render_template, escape_default_query
+from ariadne.explorer.template import read_template
 from ariadne.types import ExtensionList
 from pymongo import monitoring
 from starlette.applications import Starlette
@@ -71,13 +74,97 @@
     Middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["GET", "POST"])
 ]
 
+# The original HTML file can be found under
+# [venv]/ariadne/explorer/templates/graphiql.html
+CUSTOM_GRAPHIQL_HTML = read_template(
+    os.path.dirname(os.path.realpath(__file__)) + "/templates/custom_graphiql.html"
+)
+
+DEFAULT_QUERY = """
+#
+# GraphiQL is an in -browser tool for writing, validating, and
+# testing GraphQL queries.
+#
+# Type queries into this side of the screen, and you will see intelligent
+# typeaheads aware of the current GraphQL type schema and live syntax and
+# validation errors highlighted within the text.
+#
+# GraphQL queries typically start with a "{" character. Lines that start
+# with a # are ignored.
+#
+# An example GraphQL query might look like:
+#
+#     {
+#       field(arg: "value") {
+#         subField
+#
+#       }
+#
+#     }
+#
+# Keyboard shortcuts:
+#
+#   Prettify query: Shift - Ctrl - P(or press the prettify button)
+#
+#  Merge fragments: Shift - Ctrl - M(or press the merge button)
+#
+#        Run Query: Ctrl - Enter(or press the play button)
+#
+#    Auto Complete: Ctrl - Space(or just start typing)
+#
+query ENSG00000139618 {
+  gene(
+    by_id: {genome_id: "a7335667-93e7-11ec-a39d-005056b38ce3", stable_id: "ENSG00000139618"}
+  ) {
+    alternative_symbols
+    name
+    so_term
+    stable_id
+    transcripts {
+      stable_id
+      symbol
+    }
+  }
+}
+"""
+
+
+class CustomExplorerGraphiQL(ExplorerGraphiQL):
+    """
+    We can customize the GraphiQL interface in Ariadne by overriding the ExplorerGraphiQL class
+    which is responsible for rendering the default GraphiQL UI
+    """
+
+    def __init__(
+        self,
+        title: str = "Ensembl Core API",
+        explorer_plugin: bool = True,
+        default_query: str = DEFAULT_QUERY,
+    ):
+        super(CustomExplorerGraphiQL, self).__init__()
+        self.parsed_html = render_template(
+            CUSTOM_GRAPHIQL_HTML,
+            {
+                "title": title,
+                "enable_explorer_plugin": explorer_plugin,
+                "default_query": escape_default_query(default_query),
+            },
+        )
+
+    def html(self, _):
+        return self.parsed_html
+
+
 APP = Starlette(debug=DEBUG_MODE, middleware=starlette_middleware)
 APP.mount(
     "/",
     GraphQL(
         EXECUTABLE_SCHEMA,
         debug=DEBUG_MODE,
         context_value=CONTEXT_PROVIDER,
-        extensions=EXTENSIONS,
+        http_handler=GraphQLHTTPHandler(
+            extensions=EXTENSIONS,
+        ),
+        explorer=CustomExplorerGraphiQL(),
     ),
 )
diff --git a/graphql_service/templates/custom_graphiql.html b/graphql_service/templates/custom_graphiql.html
@@ -0,0 +1,154 @@
+<!--
+ *  This Template is copied and overridden form
+ *  [venv]/ariadne/explorer/templates/graphiql.html
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+    <title>{{ title }}</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+
+      #graphiql-loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: #545454;
+        font-size: 1.5em;
+        font-family: sans-serif;
+        font-weight: bold;
+      }
+
+      #ensembl-header {
+          background-color: #1b2c39;
+          color: white;
+          padding: 10px 30px 0px 22px;
+          font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+          font-weight: 400;
+          height: 32px;
+          align-items: center;
+      }
+
+      #ensembl-logo {
+          box-sizing: border-box;
+          color: white;
+          fill: white;
+          font-size: 13px;
+          width: 100px;
+      }
+
+      #ensembl-copyright a {
+          color: #09f;
+          font-size: 12px;
+          font-weight: 400;
+          text-decoration: none;
+          margin-left: 13px;
+      }
+
+      #ensembl-help {
+          box-sizing: border-box;
+          color: #09f;
+          fill: white;
+          font-size: 0px;
+          width: 25px;
+          float: right;
+      }
+    </style>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    {% if enable_explorer_plugin %}
+    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
+    {% endif %}
+  </head>
+
+  <body>
+
+    <div id="ensembl-header">
+        <a href="https://beta.ensembl.org" target="_blank" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 236 32" id="ensembl-logo">
+                <path d="M234.1 26.2v4.3h-24V1.4h4.5v24.8h19.5zM190.9 1.4c3.7 0 6.4.6 8.3 1.9 1.9 1.3 2.8 3.1 2.8 5.5 0 1.3-.4 2.5-1.1 3.5-.8 1-1.9 1.8-3.4 2.4 1.1.3 2.1.8 3 1.4.9.6 1.7 1.4 2.2 2.4.6 1 .9 2.2.9 3.5 0 1.7-.3 3.1-1 4.2s-1.6 2-2.7 2.6c-1.1.6-2.4 1.1-3.7 1.4-1.4.3-2.7.4-4.1.4h-17V1.4h15.8zm.4 4.4h-11.8v7.5h12.3c1 0 1.9-.2 2.8-.5.9-.3 1.5-.7 2.1-1.3.5-.6.8-1.3.8-2.1 0-1.3-.6-2.3-1.8-2.8-1.2-.6-2.7-.8-4.4-.8zm.7 11.8h-12.5v8.6h12.7c2 0 3.6-.4 4.9-1.1 1.3-.7 1.9-1.8 1.9-3.3 0-1.1-.4-2-1.1-2.6-.7-.6-1.6-1-2.7-1.3-1.1-.1-2.1-.3-3.2-.3zM138.4 1.4l11.5 15.5 11.5-15.5h4.4v29.2h-4.5V18.2c0-1.8 0-3.5.1-5.1s.2-3.2.4-4.9l-10.5 14h-2.7L138 8.2c.2 1.6.3 3.2.4 4.9.1 1.6.1 3.3.1 5.1v12.4H134V1.4h4.4zM101.7 1.4h24.2v4.3h-19.7v7.7h17.4v4.3h-17.4v8.5h19.7v4.3h-24.2V1.4zM69.9 21.6c1.6 1.7 3.4 3 5.2 4 1.8.9 4 1.4 6.6 1.4 1.4 0 2.8-.2 4.2-.5 1.3-.3 2.4-.9 3.3-1.6s1.3-1.6 1.3-2.7c0-.9-.4-1.7-1.1-2.1-.8-.5-1.9-.9-3.3-1.1-1.4-.3-3.2-.5-5.2-.8-2.5-.3-4.7-.8-6.5-1.5-1.8-.7-3.2-1.6-4.2-2.7s-1.5-2.6-1.5-4.3c0-1.8.6-3.4 1.7-4.7 1-1.3 2.6-2.3 4.5-3 2-.7 4.1-1 6.6-1 3 0 5.5.4 7.7 1.3s3.9 2.2 5.1 3.8l-3 3.3c-1.1-1.3-2.5-2.4-4.1-3.2-1.7-.8-3.6-1.2-5.8-1.2-1.5 0-2.8.2-4 .5s-2.1.8-2.8 1.4c-.7.6-1 1.3-1 2.2 0 1 .4 1.8 1.1 2.4.7.6 1.8 1.1 3.1 1.4 1.3.3 2.9.6 4.7.8 1.7.2 3.3.4 4.8.7 1.6.3 3 .7 4.2 1.3 1.2.5 2.2 1.3 2.9 2.2.7.9 1.1 2.1 1.1 3.6 0 1.9-.6 3.5-1.7 5-1.1 1.4-2.7 2.5-4.8 3.3-2.1.8-4.5 1.2-7.2 1.2-3 0-5.7-.4-8.2-1.3-2.4-.9-4.6-2.3-6.4-4.3l2.7-3.8zM56.2 1.4h4.5v29.2h-4.5L37.3 7.7c.2 1.8.3 3.6.5 5.4s.3 3.6.3 5.4v12.1h-4.5V1.4H38l18.9 23.5c-.2-1.4-.3-2.8-.4-4.5-.1-1.6-.2-3.2-.2-4.9 0-1.6-.1-3.2-.1-4.6V1.4zM25.5 1.4v4.3H5.8v7.7h17.4v4.3H5.8l.1 4.1c0 1.4.7 2.6 1.9 3.3 1.3.7 2.9 1.1 4.9 1.1h12.8v4.3H12.9c-1.4 0-2.7-.1-4.1-.4s-2.6-.7-3.7-1.4c-1.1-.6-2-1.5-2.7-2.6s-1-2.5-1-4.2V1.4h24.1z">
+                </path>
+            </svg>
+        </a>
+        <span style="margin-left: 13px">Core API (Beta)</span>
+        <span id="ensembl-copyright">
+            <a href="https://www.ebi.ac.uk" target="_blank" rel="noopener noreferrer">© EMBL-EBI</a>
+        </span>
+        <span>
+            <a href="https://beta.ensembl.org/help" target="_blank" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32" id="ensembl-help">
+                <path d="M19.635 26.895c0 2.368-1.895 4.105-4.106 4.105s-4.105-1.895-4.105-4.105 1.895-4.106 4.106-4.106 4.105 1.737 4.105 4.106zm6.316-17.21c0 6.63-7.106 6.63-7.106 9.157v.632c0 .631-.473 1.263-1.263 1.263h-4.579c-.631 0-1.263-.474-1.263-1.263v-.79c0-3.473 2.684-4.894 4.737-6 1.737-.947 2.842-1.579 2.842-2.842 0-1.737-2.21-2.842-3.947-2.842-2.369 0-3.316 1.105-4.737 2.842-.474.474-1.105.632-1.58.158L6.53 7.947c-.473-.473-.631-1.105-.315-1.579C8.582 2.895 11.582 1 16.16 1c4.737 0 9.79 3.79 9.79 8.684z"></path>
+            </svg>
+            </a>
+        </span>
+    </div>
+
+    <div id="graphiql">
+      <div id="graphiql-loading">Loading {{ title }}...</div>
+    </div>
+
+    <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>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+
+    {% if enable_explorer_plugin %}
+    <script
+      crossorigin
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
+    ></script>
+    {% endif %}
+    <script>
+      var fetcher = GraphiQL.createFetcher({
+        url: window.location.href,
+      });
+
+      function AriadneGraphiQL() {
+        var [query, setQuery] = React.useState(
+          '{% raw default_query %}',
+        );
+        {% if enable_explorer_plugin %}
+        var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
+          query: query,
+          onEdit: setQuery,
+        });
+        {% endif %}
+        return React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          defaultEditorToolsVisibility: true,
+          {% if enable_explorer_plugin %}
+          plugins: [explorerPlugin],
+          {% endif %}
+          query: query,
+          onEditQuery: setQuery,
+        });
+      }
+
+      ReactDOM.render(
+        React.createElement(AriadneGraphiQL),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/requirements.txt b/requirements.txt
@@ -2,6 +2,6 @@ mongomock==4.0.0
 pymongo==4.1.1
 requests==2.28.0
 aiodataloader==0.2.1
-ariadne==0.15.1
+ariadne==0.19.1
 python-dotenv==0.20.0
 uvicorn==0.18.1