🚀AWS API Gateway websockets integration

packages/graphql-playground-react/README.md

@@ -50,6 +50,7 @@ All interfaces, the React component `<Playground />` and all middlewares expose
 - `properties`
   - `endpoint` [`string`] - the GraphQL endpoint url.
   - `subscriptionEndpoint` [`string`] - the GraphQL subscriptions endpoint url.
+  - `aws` [`boolean`] - the subscription websocket is on AWS API Gateway
   - `setTitle` [`boolean`] - reflect the current endpoint in the page title
 
 ### As React Component

packages/graphql-playground-react/config/webpack.config.prod.js

@@ -268,23 +268,23 @@ module.exports = {
     // Otherwise React will be compiled in the very slow development mode.
     new webpack.DefinePlugin(env.stringified),
     // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        // Disabled because of an issue with Uglify breaking seemingly valid code:
-        // https://github.com/facebookincubator/create-react-app/issues/2376
-        // Pending further investigation:
-        // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false
-      },
-      output: {
-        comments: false,
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true
-      },
-      sourceMap: shouldUseSourceMap
-    }),
+    // new webpack.optimize.UglifyJsPlugin({
+    //   compress: {
+    //     warnings: false,
+    //     // Disabled because of an issue with Uglify breaking seemingly valid code:
+    //     // https://github.com/facebookincubator/create-react-app/issues/2376
+    //     // Pending further investigation:
+    //     // https://github.com/mishoo/UglifyJS2/issues/2011
+    //     comparisons: false
+    //   },
+    //   output: {
+    //     comments: false,
+    //     // Turned on because emoji and regex is not minified properly using default
+    //     // https://github.com/facebookincubator/create-react-app/issues/2488
+    //     ascii_only: true
+    //   },
+    //   sourceMap: shouldUseSourceMap
+    // }),
     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
     new ExtractTextPlugin({
       filename: cssFilename

packages/graphql-playground-react/package.json

@@ -109,6 +109,7 @@
     "apollo-link": "^1.0.7",
     "apollo-link-http": "^1.3.2",
     "apollo-link-ws": "1.0.8",
+    "aws-lambda-ws-link": "^0.1.0",
     "calculate-size": "^1.1.1",
     "codemirror": "^5.38.0",
     "codemirror-graphql": "timsuchanek/codemirror-graphql#details-fix",
@@ -117,6 +118,7 @@
     "cuid": "^1.3.8",
     "graphiql": "^0.11.2",
     "graphql": "^0.11.7",
+    "graphql-subscriptions": "^1.1.0",
     "immutable": "^4.0.0-rc.9",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.10.0",

packages/graphql-playground-react/public/index.html

@@ -516,7 +516,7 @@
     </div>
   </div>
 
-  <div id="root" />
+  <div id="root"></div>
   <script type="text/javascript">
     window.addEventListener('load', function (event) {
 
@@ -530,9 +530,9 @@
       GraphQLPlayground.init(root, {
         "env": "react",
         "canSaveConfig": false,
-        "headers": {
-          "test": "test",
-        }
+        // "headers": {
+        //   "test": "test",
+        // }
       })
     })
   </script>

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

@@ -122,20 +122,19 @@ class GraphQLBinApp extends React.Component<Props & ReduxProps, State> {
 
     return (
       <Wrapper>
-        {this.state.loading ? null : !this.state.endpoint ||
-        this.state.endpoint.length === 0 ? (
-          <ThemeProvider theme={styledTheme}>
-            <EndpointPopup
-              onRequestClose={this.handleChangeEndpoint}
-              endpoint={this.state.endpoint || ''}
-            />
-          </ThemeProvider>
-        ) : (
+        {endpoint ? (
           <PlaygroundWrapper
             endpoint={endpoint}
             headers={this.state.headers}
             subscriptionEndpoint={subscriptionEndpoint}
           />
+        ) : (
+          <ThemeProvider theme={styledTheme}>
+            <EndpointPopup
+              onRequestClose={this.handleChangeEndpoint}
+              endpoint={this.state.endpoint || endpoint || ''}
+            />
+          </ThemeProvider>
         )}
       </Wrapper>
     )

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

@@ -44,6 +44,7 @@ import {
   setLinkCreator,
   schemaFetcher,
   setSubscriptionEndpoint,
+  setAws,
 } from '../state/sessions/fetchingSagas'
 import { Session } from '../state/sessions/reducers'
 import { getWorkspaceId } from './Playground/util/getWorkspaceId'
@@ -62,6 +63,7 @@ export interface Props {
   endpoint: string
   sessionEndpoint: string
   subscriptionEndpoint?: string
+  aws?: boolean
   projectId?: string
   shareEnabled?: boolean
   fixedEndpoint?: boolean
@@ -89,6 +91,7 @@ export interface Props {
   createApolloLink?: (
     session: Session,
     subscriptionEndpoint?: string,
+    aws?: boolean,
   ) => ApolloLink
   workspaceName?: string
   schema?: GraphQLSchema
@@ -191,6 +194,7 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     setLinkCreator(props.createApolloLink)
     this.getSchema()
     setSubscriptionEndpoint(props.subscriptionEndpoint)
+    setAws(props.aws)
   }
 
   componentWillMount() {
@@ -237,6 +241,9 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     if (this.props.subscriptionEndpoint !== nextProps.subscriptionEndpoint) {
       setSubscriptionEndpoint(nextProps.subscriptionEndpoint)
     }
+    if (this.props.aws !== nextProps.aws) {
+      setAws(nextProps.aws)
+    }
     if (nextProps.headers !== this.props.headers) {
       this.props.injectHeaders(nextProps.headers, nextProps.endpoint)
     }

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

@@ -43,6 +43,7 @@ export interface PlaygroundWrapperProps {
   endpointUrl?: string
   subscriptionEndpoint?: string
   setTitle?: boolean
+  aws?: boolean
   settings?: ISettings
   shareEnabled?: string
   fixedEndpoint?: string
@@ -378,6 +379,7 @@ class PlaygroundWrapper extends React.Component<
               )}
             <Playground
               endpoint={this.state.endpoint}
+              aws={this.props.aws}
               shareEnabled={this.props.shareEnabled}
               subscriptionEndpoint={this.state.subscriptionEndpoint}
               shareUrl={this.state.shareUrl}

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

@@ -6,7 +6,12 @@ export function getActiveEndpoints(
   config: GraphQLConfig,
   envName: string,
   projectName?: string,
-): { endpoint: string; subscriptionEndpoint?: string; headers?: any } {
+): {
+  endpoint: string
+  aws?: boolean
+  subscriptionEndpoint?: string
+  headers?: any
+} {
   if (projectName) {
     const env = config.projects![projectName].extensions!.endpoints![envName]!
     return getEndpointFromEndpointConfig(env)
@@ -22,11 +27,13 @@ export function getEndpointFromEndpointConfig(
   if (typeof env === 'string') {
     return {
       endpoint: env,
+      aws: undefined,
       subscriptionEndpoint: undefined,
     }
   } else {
     return {
       endpoint: env.url,
+      aws: env.aws,
       subscriptionEndpoint: env.subscription
         ? env.subscription!.url
         : undefined,

packages/graphql-playground-react/src/graphqlConfig.ts

@@ -23,6 +23,7 @@ export interface GraphQLConfigEnpointsSubscription {
 
 export interface GraphQLConfigEnpointConfig {
   url: string
+  aws?: boolean
   headers?: { [name: string]: string }
   subscription?: GraphQLConfigEnpointsSubscription
 }

packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts

@@ -1,8 +1,12 @@
 import { ApolloLink, execute } from 'apollo-link'
 import { parseHeaders } from '../../components/Playground/util/parseHeaders'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { HttpLink } from 'apollo-link-http'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { WebSocketLink } from 'apollo-link-ws'
+import {
+  Client as SubscriptionClientLambda,
+  WebSocketLink as WebSocketLinkLambda,
+} from 'aws-lambda-ws-link'
 import { isSubscription } from '../../components/Playground/util/hasSubscription'
 import {
   takeLatest,
@@ -41,11 +45,16 @@ import { set } from 'immutable'
 
 // tslint:disable
 let subscriptionEndpoint
+let awsEndpoint
 
 export function setSubscriptionEndpoint(endpoint) {
   subscriptionEndpoint = endpoint
 }
 
+export function setAws(aws) {
+  awsEndpoint = aws
+}
+
 export interface LinkCreatorProps {
   endpoint: string
   headers?: Headers
@@ -59,7 +68,8 @@ export interface Headers {
 export const defaultLinkCreator = (
   session: LinkCreatorProps,
   subscriptionEndpoint?: string,
-): { link: ApolloLink; subscriptionClient?: SubscriptionClient } => {
+  awsEndpoint?: boolean,
+): { link: ApolloLink; subscriptionClient?: SubscriptionClientLambda } => {
   let connectionParams = {}
   const { headers, credentials } = session
 
@@ -77,13 +87,23 @@ export const defaultLinkCreator = (
     return { link: httpLink }
   }
 
-  const subscriptionClient = new SubscriptionClient(subscriptionEndpoint, {
-    timeout: 20000,
-    lazy: true,
-    connectionParams,
-  })
+  let subscriptionClient
+  let webSocketLink
+
+  if (awsEndpoint) {
+    subscriptionClient = new SubscriptionClientLambda({
+      uri: subscriptionEndpoint,
+    })
+    webSocketLink = new WebSocketLinkLambda(subscriptionClient)
+  } else {
+    subscriptionClient = new SubscriptionClient(subscriptionEndpoint, {
+      timeout: 20000,
+      lazy: true,
+      connectionParams,
+    })
+    webSocketLink = new WebSocketLink(subscriptionClient)
+  }
 
-  const webSocketLink = new WebSocketLink(subscriptionClient)
   return {
     link: ApolloLink.split(
       operation => isSubscription(operation),
@@ -133,7 +153,11 @@ function* runQuerySaga(action) {
     credentials: settings['request.credentials'],
   }
 
-  const { link, subscriptionClient } = linkCreator(lol, subscriptionEndpoint)
+  const { link, subscriptionClient } = linkCreator(
+    lol,
+    subscriptionEndpoint,
+    awsEndpoint,
+  )
   yield put(setCurrentQueryStartTime(new Date()))
 
   let firstResponse = false