Add GraphiQL support

graphql-go · Aug 24, 2017 · e9334dc · e9334dc
1 parent fab5288
commit e9334dc
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Golang HTTP.Handler for [graphl-go](https://github.com/graphql-go/graphql)
 
 ### Notes:
-This is based on alpha version of `graphql-go` and `graphql-relay-go`. 
+This is based on alpha version of `graphql-go` and `graphql-relay-go`.
 Be sure to watch both repositories for latest changes.
 
 ### Usage
@@ -20,12 +20,13 @@ func main() {
 
 	// define GraphQL schema using relay library helpers
 	schema := graphql.NewSchema(...)
-  
+
 	h := handler.New(&handler.Config{
 		Schema: &schema,
 		Pretty: true,
+		GraphiQL: true,
 	})
-	
+
 	// serve HTTP
 	http.Handle("/graphql", h)
 	http.ListenAndServe(":8080", nil)

diff --git a/graphiql.go b/graphiql.go
@@ -0,0 +1,174 @@
+package handler
+
+import (
+	"html/template"
+	"net/http"
+
+	"github.com/graphql-go/graphql"
+)
+
+// page is the page data structure of the rendered GraphiQL page
+type graphiqlPage struct {
+	GraphiqlVersion string
+	QueryString     string
+	ResultString    string
+	VariablesString string
+	OperationName   string
+}
+
+// renderGraphiQL renders the GraphiQL GUI
+func renderGraphiQL(w http.ResponseWriter, params graphql.Params) {
+	t := template.New("GraphiQL")
+	t, err := t.Parse(graphiqlTemplate)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	p := graphiqlPage{
+		GraphiqlVersion: graphiqlVersion,
+		QueryString:     params.RequestString,
+		ResultString:    "",
+		VariablesString: "",
+		OperationName:   params.OperationName,
+	}
+
+	err = t.ExecuteTemplate(w, "index", p)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+	return
+}
+
+// graphiqlVersion is the current version of GraphiQL
+const graphiqlVersion = "0.11.3"
+
+// tmpl is the page template to render GraphiQL
+const graphiqlTemplate = `
+{{ define "index" }}
+<!--
+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" />
+  <title>GraphiQL</title>
+  <meta name="robots" content="noindex" />
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+      width: 100%;
+    }
+  </style>
+  <link href="//cdn.jsdelivr.net/npm/graphiql@{{ .GraphiqlVersion }}/graphiql.css" rel="stylesheet" />
+  <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
+  <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
+  <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/graphiql@{{ .GraphiqlVersion }}/graphiql.min.js"></script>
+</head>
+<body>
+  <script>
+    // Collect the URL parameters
+    var parameters = {};
+    window.location.search.substr(1).split('&').forEach(function (entry) {
+      var eq = entry.indexOf('=');
+      if (eq >= 0) {
+        parameters[decodeURIComponent(entry.slice(0, eq))] =
+          decodeURIComponent(entry.slice(eq + 1));
+      }
+    });
+
+    // Produce a Location query string from a parameter object.
+    function locationQuery(params) {
+      return '?' + Object.keys(params).filter(function (key) {
+        return Boolean(params[key]);
+      }).map(function (key) {
+        return encodeURIComponent(key) + '=' +
+          encodeURIComponent(params[key]);
+      }).join('&');
+    }
+
+    // Derive a fetch URL from the current URL, sans the GraphQL parameters.
+    var graphqlParamNames = {
+      query: true,
+      variables: true,
+      operationName: true
+    };
+
+    var otherParams = {};
+    for (var k in parameters) {
+      if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
+        otherParams[k] = parameters[k];
+      }
+    }
+    var fetchURL = locationQuery(otherParams);
+
+    // Defines a GraphQL fetcher using the fetch API.
+    function graphQLFetcher(graphQLParams) {
+      return fetch(fetchURL, {
+        method: 'post',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(graphQLParams),
+        credentials: 'include',
+      }).then(function (response) {
+        return response.text();
+      }).then(function (responseBody) {
+        try {
+          return JSON.parse(responseBody);
+        } catch (error) {
+          return responseBody;
+        }
+      });
+    }
+
+    // When the query and variables string is edited, update the URL bar so
+    // that it can be easily shared.
+    function onEditQuery(newQuery) {
+      parameters.query = newQuery;
+      updateURL();
+    }
+
+    function onEditVariables(newVariables) {
+      parameters.variables = newVariables;
+      updateURL();
+    }
+
+    function onEditOperationName(newOperationName) {
+      parameters.operationName = newOperationName;
+      updateURL();
+    }
+
+    function updateURL() {
+      history.replaceState(null, null, locationQuery(parameters));
+    }
+
+    // Render <GraphiQL /> into the body.
+    ReactDOM.render(
+      React.createElement(GraphiQL, {
+        fetcher: graphQLFetcher,
+        onEditQuery: onEditQuery,
+        onEditVariables: onEditVariables,
+        onEditOperationName: onEditOperationName,
+        query: {{ .QueryString }},
+        response: {{ .ResultString }},
+        variables: {{ .VariablesString }},
+        operationName: {{ .OperationName }},
+      }),
+      document.body
+    );
+  </script>
+</body>
+</html>
+{{ end }}
+`
diff --git a/handler.go b/handler.go
@@ -20,8 +20,9 @@ const (
 
 type Handler struct {
 	Schema *graphql.Schema
-
-	pretty bool
+
+	pretty   bool
+	graphiql bool
 }
 type RequestOptions struct {
 	Query         string                 `json:"query" url:"query" schema:"query"`
@@ -129,7 +130,14 @@ func (h *Handler) ContextHandler(ctx context.Context, w http.ResponseWriter, r *
 	}
 	result := graphql.Do(params)
 
-
+	if h.graphiql {
+		acceptHeader := r.Header.Get("Accept")
+		if !strings.Contains(acceptHeader, "application/json") && strings.Contains(acceptHeader, "text/html") {
+			renderGraphiQL(w, params)
+			return
+		}
+	}
+
 	if h.pretty {
 		w.WriteHeader(http.StatusOK)
 		buff, _ := json.MarshalIndent(result, "", "\t")
@@ -138,7 +146,7 @@ func (h *Handler) ContextHandler(ctx context.Context, w http.ResponseWriter, r *
 	} else {
 		w.WriteHeader(http.StatusOK)
 		buff, _ := json.Marshal(result)
-	
+
 		w.Write(buff)
 	}
 }
@@ -149,14 +157,16 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 }
 
 type Config struct {
-	Schema *graphql.Schema
-	Pretty bool
+	Schema   *graphql.Schema
+	Pretty   bool
+	GraphiQL bool
 }
 
 func NewConfig() *Config {
 	return &Config{
-		Schema: nil,
-		Pretty: true,
+		Schema:   nil,
+		Pretty:   true,
+		GraphiQL: true,
 	}
 }
 
@@ -169,7 +179,8 @@ func New(p *Config) *Handler {
 	}
 
 	return &Handler{
-		Schema: p.Schema,
-		pretty: p.Pretty,
+		Schema:   p.Schema,
+		pretty:   p.Pretty,
+		graphiql: p.GraphiQL,
 	}
 }