switch to graphql playground for better subscription support

99designs · Feb 17, 2018 · f555aec · f555aec
1 parent 1821954
commit f555aec
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 60 deletions.
diff --git a/handler/graphiql.go b/handler/graphiql.go
diff --git a/handler/graphql.go b/handler/graphql.go
@@ -41,7 +41,7 @@ func GraphQL(exec graphql.ExecutableSchema) http.HandlerFunc {
 			}
 		} else {
 			if err := json.NewDecoder(r.Body).Decode(&params); err != nil {
-				sendErrorf(w, http.StatusBadRequest, "json body could not be decoded")
+				sendErrorf(w, http.StatusBadRequest, "json body could not be decoded: "+err.Error())
 				return
 			}
 		}

diff --git a/handler/playground.go b/handler/playground.go
@@ -0,0 +1,51 @@
+package handler
+
+import (
+	"html/template"
+	"net/http"
+)
+
+var page = template.Must(template.New("graphiql").Parse(`<!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">
+	<link rel="shortcut icon" href="https://graphcool-playground.netlify.com/favicon.png">
+	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react@{{ .version }}/build/static/css/index.css"/>
+	<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react@{{ .version }}/build/favicon.png"/>
+	<script src="//cdn.jsdelivr.net/npm/graphql-playground-react@{{ .version }}/build/static/js/middleware.js"></script>
+	<title>{{.title}}</title>
+</head>
+<body>
+<style type="text/css">
+	html { font-family: "Open Sans", sans-serif; overflow: hidden; }
+	body { margin: 0; background: #172a3a; }
+</style>
+<div id="root"/>
+<script type="text/javascript">
+	window.addEventListener('load', function (event) {
+		const root = document.getElementById('root');
+		root.classList.add('playgroundIn');
+		const wsProto = location.protocol == 'https:' ? 'wss:' : 'ws:'
+		GraphQLPlayground.init(root, {
+			endpoint: location.protocol + '//' + location.host + '{{.endpoint}}',
+			subscriptionsEndpoint: wsProto + '//' + location.host + '{{.endpoint }}',
+		})
+	})
+</script>
+</body>
+</html>
+`))
+
+func Playground(title string, endpoint string) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		err := page.Execute(w, map[string]string{
+			"title":    title,
+			"endpoint": endpoint,
+			"version":  "1.4.3",
+		})
+		if err != nil {
+			panic(err)
+		}
+	}
+}
diff --git a/handler/websocket.go b/handler/websocket.go
@@ -19,7 +19,7 @@ import (
 const (
 	connectionInitMsg      = "connection_init"      // Client -> Server
 	connectionTerminateMsg = "connection_terminate" // Client -> Server
-	startMsg               = "run"                  // Client -> Server
+	startMsg               = "start"                // Client -> Server
 	stopMsg                = "stop"                 // Client -> Server
 	connectionAckMsg       = "connection_ack"       // Server -> Client
 	connectionErrorMsg     = "connection_error"     // Server -> Client
@@ -52,7 +52,9 @@ type wsConnection struct {
 }
 
 func connectWs(exec graphql.ExecutableSchema, w http.ResponseWriter, r *http.Request) {
-	ws, err := upgrader.Upgrade(w, r, nil)
+	ws, err := upgrader.Upgrade(w, r, http.Header{
+		"Sec-Websocket-Protocol": []string{"graphql-ws"},
+	})
 	if err != nil {
 		log.Printf("unable to upgrade connection to websocket %s: ", err.Error())
 		sendErrorf(w, http.StatusBadRequest, "unable to upgrade")