Merge pull request #28 from tlvenn/v1.2

Add advanced GraphiQL interface
absinthe-graphql · Oct 24, 2016 · f85078e · f85078e
2 parents b7d32e9 + 7db3e49
commit f85078e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/lib/absinthe/plug/graphiql.ex b/lib/absinthe/plug/graphiql.ex
@@ -16,13 +16,33 @@ defmodule Absinthe.Plug.GraphiQL do
   EEx.function_from_file :defp, :graphiql_html, Path.join(__DIR__, "graphiql.html.eex"),
     [:graphiql_version, :query_string, :variables_string, :result_string]
 
+  @graphql_toolbox_version "1.0.1"
+  EEx.function_from_file :defp, :graphql_toolbox_html, Path.join(__DIR__, "graphql_toolbox.html.eex"),
+    [:graphql_toolbox_version, :query_string, :variables_string]
 
   @behaviour Plug
 
   import Plug.Conn
   import Absinthe.Plug, only: [prepare: 3, setup_pipeline: 3, load_body_and_params: 1]
 
-  defdelegate init(opts), to: Absinthe.Plug
+  @type opts :: [
+    schema: atom,
+    adapter: atom,
+    path: binary,
+    context: map,
+    json_codec: atom | {atom, Keyword.t},
+    interface: atom
+  ]
+
+  @doc """
+  Sets up and validates the Absinthe schema
+  """
+  @spec init(opts :: opts) :: map
+  def init(opts) do
+    opts
+    |> Absinthe.Plug.init
+    |> Map.put(:interface, Keyword.get(opts, :interface, :advanced))
+  end
 
   def call(conn, config) do
     case html?(conn) do
@@ -40,7 +60,7 @@ defmodule Absinthe.Plug.GraphiQL do
     end
   end
 
-  defp do_call(conn, %{json_codec: _} = config) do
+  defp do_call(conn, %{json_codec: _, interface: interface} = config) do
     {conn, body} = load_body_and_params(conn)
 
     with {:ok, input, opts} <- prepare(conn, body, config),
@@ -60,7 +80,11 @@ defmodule Absinthe.Plug.GraphiQL do
         |> Poison.encode!(pretty: true)
         |> js_escape
 
-        html = graphiql_html(@graphiql_version, query, var_string, result)
+        html = case interface do
+          :advanced -> graphql_toolbox_html(@graphql_toolbox_version, query, var_string)
+          :simple -> graphiql_html(@graphiql_version, query, var_string, result)
+        end
+
         conn
         |> put_resp_content_type("text/html")
         |> send_resp(200, html)

diff --git a/lib/absinthe/plug/graphql_toolbox.html.eex b/lib/absinthe/plug/graphql_toolbox.html.eex
@@ -0,0 +1,42 @@
+<!--
+The request to this GraphQL server provided the header "Accept: text/html"
+and as a result has been presented GraphiQL - an in-browser IDE for
+exploring GraphQL.
+If you wish to receive JSON, provide the header "Accept: application/json" or
+add "&raw" to the end of the URL within a browser.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>GraphiQl</title>
+
+  <script src="//use.typekit.net/pea2oar.js"></script>
+  <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
+  <link href="//cdn.jsdelivr.net/graphql-toolbox/<%= graphql_toolbox_version %>/graphiql.min.css" rel="stylesheet" />
+  <!-- for now, need to provide explicit font-face for Glyphicons until the issue is fixed on graphql-toolbox side -->
+  <style>
+    @font-face {
+      font-family: 'Glyphicons Halflings';
+      src: url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);
+      src: url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot) format("embedded-opentype"), url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2) format("woff2"), url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff) format("woff"), url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf) format("truetype"), url(//cdn.jsdelivr.net/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg) format("svg");
+    }
+  </style>
+
+  <script src="//cdn.jsdelivr.net/graphql-toolbox/<%= graphql_toolbox_version %>/graphiql.min.js"></script>
+</head>
+<body>
+  <div id="graphiql-tool"></div>
+
+  <script type="text/javascript">
+    graphiql.bootstrap({
+      defaultUrl: window.location.origin + window.location.pathname,
+      defaultQuery: '<%= query_string %>',
+      defaultVariables: '<%= variables_string %>'
+    });
+  </script>
+</body>
+</html>