hasura · shahidhk · Jul 20, 2018 · Jul 3, 2018 · Jul 3, 2018 · Jul 10, 2018
@@ -51,11 +51,14 @@
     }
   },
   "dependencies": {
+    "apollo-link": "^1.2.2",
+    "apollo-link-ws": "^1.0.8",
     "babel-polyfill": "^6.26.0",
     "brace": "^0.11.1",
     "deep-equal": "^1.0.1",
     "graphiql": "^0.11.11",
     "graphql": "^0.13.2",
+    "hasura-console-graphiql": "0.0.1",
     "history": "^3.0.0",
     "hoist-non-react-statics": "^1.0.3",
     "invariant": "^2.2.0",
@@ -90,6 +93,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
     "semver": "^5.3.0",
+    "subscriptions-transport-ws": "^0.9.12",
     "superagent": "^1.4.0",
     "uuid": "^3.0.1",
     "valid-url": "^1.0.9"

@@ -1,5 +1,10 @@
 import defaultState from './state';
-import fetch from 'isomorphic-fetch';
+// import fetch from 'isomorphic-fetch';
+
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { WebSocketLink } from 'apollo-link-ws';
+import { parse } from 'graphql';
+import { execute } from 'apollo-link';
 
 const CHANGE_TAB = 'ApiExplorer/CHANGE_TAB';
 const CHANGE_API_SELECTION = 'ApiExplorer/CHANGE_API_SELECTION';
@@ -26,6 +31,11 @@ const API_REQUEST_FAILURE = 'ApiExplorer/API_REQUEST_FAILURE';
 const CLEAR_HISTORY = 'ApiExplorer/CLEAR_HISTORY';
 const UPDATE_FILE_OBJECT = 'ApiExplorer/UPDATE_FILE_OBJECT';
 
+const CREATE_WEBSOCKET_CLIENT = 'ApiExplorer/CREATE_WEBSOCKET_CLIENT';
+
+const FOCUS_ROLE_HEADER = 'ApiExplorer/FOCUS_ROLE_HEADER';
+const UNFOCUS_ROLE_HEADER = 'ApiExplorer/UNFOCUS_ROLE_HEADER';
+
 import requestAction from '../Common/makeRequest';
 import Endpoints from 'Endpoints';
 import { getHeadersAsJSON } from './utils';
@@ -99,6 +109,9 @@ const sendExplorerReq = requestType => {
   };
 };
 
+const focusHeaderTextbox = () => ({ type: FOCUS_ROLE_HEADER });
+const unfocusTypingHeader = () => ({ type: UNFOCUS_ROLE_HEADER });
+
 const copyCodeToClipboard = isCopying => {
   return {
     type: CODE_GENERATOR_COPY_TO_CLIPBOARD,
@@ -156,40 +169,76 @@ const changeRequestParams = newParams => {
   };
 };
 
-const graphQLFetcherFinal = (graphQLParams, url, headers) => {
-  const graphqlUrl = url;
-  const currentHeaders = headers;
-  const headersFinal = getHeadersAsJSON(currentHeaders);
+const createWsClient = (url, headers) => {
+  const headersFinal = getHeadersAsJSON(headers);
+  setTimeout(() => null, 500);
+  const graphqlUrl = `ws://${url.split('//')[1]}`;
+  const client = new SubscriptionClient(graphqlUrl, {
+    connectionParams: {
+      headers: {
+        ...headersFinal,
+      },
+    },
+  });
+  return client;
+};
 
-  return fetch(graphqlUrl, {
-    method: 'POST',
-    headers: headersFinal,
-    body: JSON.stringify(graphQLParams),
-  }).then(response => response.json());
+const graphqlSubscriber = (graphQLParams, url, headers) => {
+  const link = new WebSocketLink(createWsClient(url, headers));
+  try {
+    const fetcher = operation => {
+      operation.query = parse(operation.query);
+      return execute(link, operation);
+    };
+    return fetcher(graphQLParams);
+  } catch (e) {
+    console.log(e);
+    return e.json();
+  }
 };
 
-const changeRequestHeader = (index, key, newValue, isDisabled) => {
-  return {
-    type: REQUEST_HEADER_CHANGED,
-    data: {
-      index: index,
-      keyName: key,
-      newValue: newValue,
-      isDisabled: isDisabled,
-    },
-  };
+const isSubscription = graphQlParams => {
+  const queryDoc = parse(graphQlParams.query);
+  for (const definition of queryDoc.definitions) {
+    if (definition.kind === 'OperationDefinition') {
+      const operation = definition.operation;
+      if (operation === 'subscription') {
+        return true;
+      }
+    }
+  }
+  return false;
 };
 
-const addRequestHeader = (key, value) => {
-  return {
-    type: REQUEST_HEADER_ADDED,
-    data: {
-      key: key,
-      value: value,
-    },
-  };
+const graphQLFetcherFinal = (graphQLParams, url, headers) => {
+  if (isSubscription(graphQLParams)) {
+    return graphqlSubscriber(graphQLParams, url, headers);
+  }
+  return fetch(url, {
+    method: 'POST',
+    headers: getHeadersAsJSON(headers),
+    body: JSON.stringify(graphQLParams),
+  }).then(response => response.json());
 };
 
+const changeRequestHeader = (index, key, newValue, isDisabled) => ({
+  type: REQUEST_HEADER_CHANGED,
+  data: {
+    index: index,
+    keyName: key,
+    newValue: newValue,
+    isDisabled: isDisabled,
+  },
+});
+
+const addRequestHeader = (key, value) => ({
+  type: REQUEST_HEADER_ADDED,
+  data: {
+    key: key,
+    value: value,
+  },
+});
+
 const removeRequestHeader = index => {
   return {
     type: REQUEST_HEADER_REMOVED,
@@ -527,6 +576,21 @@ const apiExplorerReducer = (state = defaultState, action) => {
           enableResponseSection: false,
         },
       };
+    case CREATE_WEBSOCKET_CLIENT:
+      return {
+        ...state,
+        webSocketClient: action.data,
+      };
+    case UNFOCUS_ROLE_HEADER:
+      return {
+        ...state,
+        headerFocus: false,
+      };
+    case FOCUS_ROLE_HEADER:
+      return {
+        ...state,
+        headerFocus: true,
+      };
     default:
       return state;
   }
@@ -553,4 +617,7 @@ export {
   updateFileObject,
   editGeneratedJson,
   graphQLFetcherFinal,
+  createWsClient,
+  focusHeaderTextbox,
+  unfocusTypingHeader,
 };
@@ -66,6 +66,7 @@ class ApiExplorer extends Component {
         route={this.props.route}
         dataHeaders={this.props.dataHeaders}
         numberOfTables={this.props.tables.length}
+        headerFocus={this.props.headerFocus}
       />
     );
 
@@ -84,6 +85,7 @@ ApiExplorer.propTypes = {
   dispatch: PropTypes.func.isRequired,
   route: PropTypes.object.isRequired,
   tables: PropTypes.array.isRequierd,
+  headerFocus: PropTypes.bool.isRequired,
 };
 
 export default ApiExplorer;
@@ -12,6 +12,8 @@ import {
   removeRequestHeader,
   updateFileObject,
   editGeneratedJson,
+  focusHeaderTextbox,
+  unfocusTypingHeader,
 } from './Actions';
 
 import GraphiQLWrapper from './GraphiQLWrapper';
@@ -24,6 +26,7 @@ class ApiRequest extends Component {
     this.state = {};
     this.state.bodyAllowedMethods = ['POST'];
     this.state.tabIndex = 0;
+    this.timer = null;
   }
 
   componentWillMount() {
@@ -69,10 +72,12 @@ class ApiRequest extends Component {
   }
 
   onNewHeaderKeyChanged(e) {
+    this.handleTypingTimeouts();
     this.props.dispatch(addRequestHeader(e.target.value, ''));
   }
 
   onNewHeaderValueChanged(e) {
+    this.handleTypingTimeouts();
     this.props.dispatch(addRequestHeader('', e.target.value));
   }
 
@@ -235,6 +240,8 @@ class ApiRequest extends Component {
               placeholder="Enter Key"
               data-element-name="key"
               onChange={this.onHeaderValueChanged.bind(this)}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
               type="text"
             />
           </td>
@@ -258,6 +265,8 @@ class ApiRequest extends Component {
               placeholder="Enter Value"
               data-element-name="value"
               onChange={this.onHeaderValueChanged.bind(this)}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
               type="text"
             />
           </td>
@@ -321,13 +330,23 @@ class ApiRequest extends Component {
           <GraphiQLWrapper
             data={this.props}
             numberOfTables={this.props.numberOfTables}
+            dispatch={this.props.dispatch}
+            headerFocus={this.props.headerFocus}
           />
         );
       default:
         return '';
     }
   }
 
+  handleFocus = () => {
+    this.props.dispatch(focusHeaderTextbox());
+  };
+
+  handleBlur = () => {
+    this.props.dispatch(unfocusTypingHeader());
+  };
+
   handleFileChange(e) {
     if (e.target.files.length > 0) {
       this.props.dispatch(updateFileObject(e.target.files[0]));
@@ -358,6 +377,7 @@ ApiRequest.propTypes = {
   bodyType: PropTypes.string.isRequired,
   route: PropTypes.object.isRequired,
   numberOfTables: PropTypes.number.isRequired,
+  headerFocus: PropTypes.bool.isRequired,
 };
 
 export default ApiRequest;
@@ -39,6 +39,7 @@ class ApiRequestWrapper extends Component {
           dispatch={this.props.dispatch}
           dataHeaders={this.props.dataHeaders}
           numberOfTables={this.props.numberOfTables}
+          headerFocus={this.props.headerFocus}
         />
         {this.props.request.bodyType !== 'graphql' ? (
           <ApiResponse
@@ -68,6 +69,7 @@ ApiRequestWrapper.propTypes = {
   wdStyles: PropTypes.string,
   dispatch: PropTypes.func,
   numberOfTables: PropTypes.number,
+  headerFocus: PropTypes.bool.isRequired,
 };
 
 export default ApiRequestWrapper;
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import GraphiQL from 'graphiql';
+import GraphiQL from 'hasura-console-graphiql';
 import PropTypes from 'prop-types';
 import ErrorBoundary from './ErrorBoundary';
 import { graphQLFetcherFinal } from './Actions';
 
 import './GraphiQL.css';
 
 class GraphiQLWrapper extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
       schema: null,
       error: false,
@@ -17,20 +17,19 @@ class GraphiQLWrapper extends Component {
     };
   }
 
-  shouldComponentUpdate() {
-    // shouldn't re-render if headers change. play button will trigger the query
-    return false;
+  shouldComponentUpdate(nextProps) {
+    return !nextProps.headerFocus;
   }
 
   render() {
     const styles = require('../Common/Common.scss');
-
-    const graphqlUrl = this.props.data.url;
-
     const graphQLFetcher = graphQLParams => {
+      if (this.state.headerFocus) {
+        return null;
+      }
       return graphQLFetcherFinal(
         graphQLParams,
-        graphqlUrl,
+        this.props.data.url,
         this.props.data.headers
       );
     };
@@ -78,6 +77,7 @@ GraphiQLWrapper.propTypes = {
   dispatch: PropTypes.func.isRequired,
   data: PropTypes.object.isRequired,
   numberOfTables: PropTypes.number.isRequired,
+  headerFocus: PropTypes.bool.isRequired,
 };
 
 export default GraphiQLWrapper;
@@ -62,6 +62,7 @@ const defaultState = {
   },
   explorerData,
   authApiExpanded: 'Username-password Login',
+  headerFocus: false,
 };
 
 export default defaultState;

@@ -14,7 +14,7 @@ cabal-dev
 .cabal-sandbox/
 cabal.sandbox.config
 cabal.config
-*.prof
+*.prof*
 *.aux
 *.hp
 TAGS

@@ -1,13 +1,16 @@
 {
-  "name": "react-app",
+  "name": "graphiql",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "apollo-link": "^1.2.2",
+    "apollo-link-ws": "^1.0.8",
     "graphiql": "^0.11.11",
     "graphql": "^0.13.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-scripts": "1.1.4",
+    "subscriptions-transport-ws": "^0.9.12"
   },
   "scripts": {
     "start": "react-scripts start",
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ cabal-dev @@
     .cabal-sandbox/
     cabal.sandbox.config
     cabal.config
-    *.prof
+    *.prof*
     *.aux
     *.hp
     TAGS
@@ Expand Down @@