accept query_file query param for preloading queries (#1185)

community/tools/graphiql-online/src/components/ApiExplorer/Actions.js

@@ -29,6 +29,12 @@ const updateGraphQLEndpoint = (endpoint) => {
   };
 };
 
+const getRemoteQueries = (queryUrl, cb) => {
+  fetch(queryUrl)
+    .then(resp => resp.text().then(cb))
+    .catch(e => console.log('Invalid query URL: ', e));
+};
+
 const createWsClient = (url, headers) => {
   const gqlUrl = new URL(url);
   let websocketProtocol = 'ws';
@@ -236,5 +242,6 @@ export {
   graphQLFetcherFinal,
   focusHeaderTextbox,
   unfocusTypingHeader,
+  getRemoteQueries,
   updateGraphQLEndpoint,
 };

community/tools/graphiql-online/src/components/ApiExplorer/ApiExplorer.js

@@ -12,7 +12,7 @@ class ApiExplorer extends Component {
     } else {
       localStorageUrl = window.localStorage.getItem('ONLINE_GRAPHIQL_ENDPOINT');
     }
-    if (!this.props.graphqlEndpoint && (localStorageUrl === 'undefined' || localStorage === null)) {
+    if (!this.props.graphqlEndpoint && (localStorageUrl === 'undefined' || localStorageUrl === null)) {
       this.props.dispatch(push('/'));
     }
   }
@@ -39,6 +39,7 @@ class ApiExplorer extends Component {
         route={this.props.route}
         dataHeaders={this.props.dataHeaders}
         headerFocus={this.props.headerFocus}
+        queryParams={this.props.location.query}
         graphqlEndpoint={localStorageUrl}
       />
     );
@@ -60,6 +61,7 @@ ApiExplorer.propTypes = {
   dispatch: PropTypes.func.isRequired,
   route: PropTypes.object.isRequired,
   headerFocus: PropTypes.bool.isRequired,
+  location: PropTypes.object.isRequired,
 };
 
 export default ApiExplorer;

community/tools/graphiql-online/src/components/ApiExplorer/ApiRequest.js

@@ -270,6 +270,7 @@ class ApiRequest extends Component {
             data={this.props}
             dispatch={this.props.dispatch}
             headerFocus={this.props.headerFocus}
+            queryParams={this.props.queryParams}
           />
         );
       default:
@@ -320,6 +321,7 @@ ApiRequest.propTypes = {
   route: PropTypes.object.isRequired,
   numberOfTables: PropTypes.number.isRequired,
   headerFocus: PropTypes.bool.isRequired,
+  queryParams: PropTypes.object.isRequired,
 };
 
 export default ApiRequest;

community/tools/graphiql-online/src/components/ApiExplorer/ApiRequestWrapper.js

@@ -39,6 +39,7 @@ class ApiRequestWrapper extends Component {
           dataHeaders={this.props.dataHeaders}
           numberOfTables={this.props.numberOfTables}
           headerFocus={this.props.headerFocus}
+          queryParams={this.props.queryParams}
         />
       </div>
     );
@@ -58,6 +59,7 @@ ApiRequestWrapper.propTypes = {
   numberOfTables: PropTypes.number,
   headerFocus: PropTypes.bool.isRequired,
   graphqlEndpoint: PropTypes.string,
+  queryParams: PropTypes.object.isRequired,
 };
 
 export default ApiRequestWrapper;

community/tools/graphiql-online/src/components/ApiExplorer/GraphiQLWrapper.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import GraphiQL from 'hasura-console-graphiql';
 import PropTypes from 'prop-types';
 import ErrorBoundary from './ErrorBoundary';
-import { graphQLFetcherFinal } from './Actions';
+import { graphQLFetcherFinal, getRemoteQueries } from './Actions';
 
 import './GraphiQL.css';
 
@@ -12,8 +12,17 @@ class GraphiQLWrapper extends Component {
     this.state = {
       schema: null,
       error: false,
+      queries: null,
       onBoardingEnabled: false,
     };
+    const queryFile = this.props.queryParams
+      ? this.props.queryParams.query_file
+      : null;
+    if (queryFile) {
+      getRemoteQueries(queryFile, queries =>
+        this.setState({ ...this.state, queries })
+      );
+    }
   }
 
   shouldComponentUpdate(nextProps) {
@@ -38,6 +47,8 @@ class GraphiQLWrapper extends Component {
       if (variables !== 'undefined') {
         graphiqlProps.variables = JSON.stringify(variables, null, 2);
       }
+    } else if (this.state.queries) {
+      graphiqlProps.query = this.state.queries;
     }
     return (
       <ErrorBoundary>