graceful subscription url handling

Author: timsuchanek

packages/graphql-playground-middleware-express/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-middleware-express",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-express",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "contributors": [

packages/graphql-playground-middleware-hapi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-middleware-hapi",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-hapi",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "contributors": [

packages/graphql-playground-middleware-koa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-middleware-koa",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-koa",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "contributors": [

packages/graphql-playground-middleware-lambda/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-middleware-lambda",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-lambada",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "contributors": [

packages/graphql-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",

packages/graphql-playground/src/components/MiddlewareApp.tsx

@@ -39,16 +39,28 @@ class MiddlewareApp extends React.Component<Props, State> {
     const endpoint =
       props.endpoint || getParameterByName('endpoint') || location.href
 
+    const subscriptionEndpoint =
+      props.subscriptionEndpoint || getParameterByName('subscriptionEndpoint')
+
     this.state = {
       endpoint,
       platformToken: localStorage.getItem('platform-token') || undefined,
-      subscriptionEndpoint:
-        props.subscriptionEndpoint ||
-        getParameterByName('subscriptionEndpoint') ||
-        '',
+      subscriptionEndpoint: subscriptionEndpoint
+        ? this.normalizeSubscriptionUrl(endpoint, subscriptionEndpoint)
+        : '',
     }
   }
 
+  normalizeSubscriptionUrl(endpoint, subscriptionEndpoint) {
+    if (subscriptionEndpoint.startsWith('/')) {
+      const secure =
+        endpoint.includes('https') || location.href.includes('https') ? 's' : ''
+      return `ws${secure}://${location.host}${subscriptionEndpoint}`
+    }
+
+    return subscriptionEndpoint
+  }
+
   componentWillMount() {
     const platformToken = getParameterByName('platform-token')
     if (platformToken && platformToken.length > 0) {

packages/graphql-playground/src/components/Playground.tsx

@@ -284,40 +284,39 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       headers.forEach(header => (additionalHeaders[header.name] = header.value))
     }
 
-    return this.fetchSchema(
-      this.getSimpleEndpoint(),
-      additionalHeaders,
-    ).then(simpleSchemaData => {
-      if (!simpleSchemaData || simpleSchemaData.error) {
-        this.setState({
-          response: {
-            date: simpleSchemaData.error,
-            time: new Date(),
-          },
-        } as State)
-        return
-      }
+    return this.fetchSchema(this.getSimpleEndpoint(), additionalHeaders).then(
+      simpleSchemaData => {
+        if (!simpleSchemaData || simpleSchemaData.error) {
+          this.setState({
+            response: {
+              date: simpleSchemaData.error,
+              time: new Date(),
+            },
+          } as State)
+          return
+        }
 
-      if (isEqual(this.rawSchemaCache, simpleSchemaData.data)) {
-        return
-      }
+        if (isEqual(this.rawSchemaCache, simpleSchemaData.data)) {
+          return
+        }
 
-      this.rawSchemaCache = simpleSchemaData.data
+        this.rawSchemaCache = simpleSchemaData.data
 
-      if (!simpleSchemaData.data) {
-        return
-      }
+        if (!simpleSchemaData.data) {
+          return
+        }
 
-      const simpleSchema = buildClientSchema(simpleSchemaData.data)
-      const userFields = this.extractUserField(simpleSchema)
+        const simpleSchema = buildClientSchema(simpleSchemaData.data)
+        const userFields = this.extractUserField(simpleSchema)
 
-      this.renewStack(simpleSchema)
+        this.renewStack(simpleSchema)
 
-      this.setState({
-        schemaCache: simpleSchema,
-        userFields,
-      } as State)
-    })
+        this.setState({
+          schemaCache: simpleSchema,
+          userFields,
+        } as State)
+      },
+    )
   }
 
   componentWillUnmount() {
@@ -351,10 +350,15 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
 
     const endpoint = this.getWSEndpoint()
     if (endpoint) {
-      this.wsConnections[session.id] = new SubscriptionClient(endpoint, {
-        timeout: 20000,
-        connectionParams,
-      })
+      try {
+        this.wsConnections[session.id] = new SubscriptionClient(endpoint, {
+          timeout: 20000,
+          connectionParams,
+        })
+      } catch (e) {
+        /* tslint:disable-next-line */
+        console.error(e)
+      }
     }
   }
   initWebsockets() {
@@ -554,7 +558,9 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       .catch(e => {
         this.setState({
           response: {
-            date: `Error: Could not fetch schema from ${endpointUrl}. Make sure the url is correct.`,
+            date: `Error: Could not fetch schema from ${
+              endpointUrl
+            }. Make sure the url is correct.`,
             time: new Date(),
             resultID: cuid(),
           },