fix: react app subscription handling

Author: timsuchanek

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

@@ -425,7 +425,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
   }
 
   setRef = (index: number, ref: any) => {
-    this.graphiqlComponents[index] = ref ?  ref.getWrappedInstance() : ref
+    this.graphiqlComponents[index] = ref ? ref.getWrappedInstance() : ref
   }
 
   handleChangeSettings = (settings: string) => {
@@ -974,7 +974,12 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
             this.setValueInSession(session.id, 'subscriptionActive', true)
           }
 
-          const wsConnection = this.wsConnections[session.id]
+          let wsConnection = this.wsConnections[session.id]
+
+          if (!wsConnection) {
+            this.setWS(session)
+            wsConnection = this.wsConnections[session.id]
+          }
 
           const id = wsConnection.subscribe(graphQLParams, (err, res) => {
             const data: any = { data: res, isSubscription: true }

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

@@ -2,6 +2,7 @@ import * as React from 'react'
 import ageOfDate from './util/ageOfDate'
 import { ResultViewer } from './ResultViewer'
 import { Response } from '../Playground'
+import * as cn from 'classnames'
 
 export interface Props {
   disableResize?: boolean
@@ -12,11 +13,14 @@ export interface Props {
 
 export default class Results extends React.Component<Props, {}> {
   render() {
+    const { disableResize } = this.props
+    const isSubscription = this.props.responses.length > 1
     return (
       <div
-        className={
-          'result-window' + (this.props.disableResize ? ' disableResize' : '')
-        }
+        className={cn('result-window', {
+          disableResize,
+          isSubscription,
+        })}
         ref={this.props.setRef}
       >
         <style jsx={true}>{`
@@ -55,6 +59,9 @@ export default class Results extends React.Component<Props, {}> {
             bottom: 0;
             overflow: auto;
           }
+          .isSubscription .result-viewer-wrapper {
+            position: relative;
+          }
         `}</style>
         {this.props.responses.map(response => (
           <div key={response.resultID || String(response.time)}>

packages/graphql-playground-react/src/components/Playground/util/getQueryFacts.ts

@@ -0,0 +1,72 @@
+/**
+ *  Copyright (c) Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import { parse, typeFromAST } from 'graphql'
+
+/**
+ * Provided previous "queryFacts", a GraphQL schema, and a query document
+ * string, return a set of facts about that query useful for GraphiQL features.
+ *
+ * If the query cannot be parsed, returns undefined.
+ */
+export default function getQueryFacts(schema, documentStr): any {
+  if (!documentStr) {
+    return
+  }
+
+  let documentAST
+  try {
+    documentAST = parse(documentStr)
+  } catch (e) {
+    return
+  }
+
+  const variableToType = schema ? collectVariables(schema, documentAST) : null
+
+  // Collect operations by their names.
+  const operations: any[] = []
+  documentAST.definitions.forEach(def => {
+    if (def.kind === 'OperationDefinition') {
+      operations.push(def)
+    }
+  })
+
+  return { variableToType, operations }
+}
+
+/**
+ * Provided a schema and a document, produces a `variableToType` Object.
+ */
+export function collectVariables(schema, documentAST) {
+  const variableToType = Object.create(null)
+  documentAST.definitions.forEach(definition => {
+    if (definition.kind === 'OperationDefinition') {
+      const variableDefinitions = definition.variableDefinitions
+      if (variableDefinitions) {
+        variableDefinitions.forEach(({ variable, type }) => {
+          try {
+            const inputType = typeFromAST(schema, getDeepType(type))
+            if (inputType) {
+              variableToType[variable.name.value] = inputType
+            }
+          } catch (e) {
+            debugger
+          }
+        })
+      }
+    }
+  })
+  return variableToType
+}
+
+function getDeepType(type) {
+  if (type.type) {
+    return getDeepType(type.type)
+  }
+  return type
+}

packages/graphql-playground-react/src/components/util.ts

@@ -20,13 +20,14 @@ export function getEndpointFromEndpointConfig(
   if (typeof env === 'string') {
     return {
       endpoint: env,
+      subscriptionEndpoint: env.replace(/^http/, 'ws'),
     }
   } else {
     return {
       endpoint: env.url,
       subscriptionEndpoint: env.subscription
         ? env.subscription!.url
-        : undefined,
+        : env.url.replace(/^http/, 'ws'),
       headers: env.headers,
     }
   }