Send first named query as operationName

app/common/prettify.js

@@ -26,6 +26,10 @@ const NUNJUCKS_CLOSE_STATES = {
  * @returns {string}
  */
 export function prettifyJson (json, indentChars = '\t') {
+  if (!json) {
+    return '';
+  }
+
   // Convert the unicode. To correctly mimic JSON.stringify(JSON.parse(json), null, indentChars)
   // we need to convert all escaped unicode characters to proper unicode characters.
   try {

app/ui/components/editors/body/graph-ql-editor.js

@@ -7,7 +7,6 @@ import autobind from 'autobind-decorator';
 import {parse, print} from 'graphql';
 import {introspectionQuery} from 'graphql/utilities/introspectionQuery';
 import {buildClientSchema} from 'graphql/utilities/buildClientSchema';
-import clone from 'clone';
 import CodeEditor from '../../codemirror/code-editor';
 import {jsonParseOr} from '../../../../common/misc';
 import HelpTooltip from '../../help-tooltip';
@@ -22,7 +21,7 @@ import TimeFromNow from '../../time-from-now';
 
 type GraphQLBody = {
   query: string,
-  variables: Object,
+  variables?: Object,
   operationName?: string
 }
 
@@ -158,13 +157,37 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
     }, 200);
   }
 
-  _handleBodyChange (query: string, variables: Object): void {
-    const body = clone(this.state.body);
-    const newState = {variablesSyntaxError: '', body};
+  _getOperationNames (): Array<string> {
+    const {body} = this.state;
 
-    newState.body.query = query;
-    newState.body.variables = variables;
-    this.setState(newState);
+    let documentAST;
+    try {
+      documentAST = parse(body.query);
+    } catch (e) {
+      return [];
+    }
+
+    return documentAST.definitions
+      .filter(def => def.kind === 'OperationDefinition')
+      .map(def => def.name ? def.name.value : null)
+      .filter(Boolean);
+  }
+
+  _handleBodyChange (query: string, variables?: Object): void {
+    const operationNames = this._getOperationNames();
+    const firstName = operationNames.length ? operationNames[0] : null;
+
+    const body: GraphQLBody = {query};
+
+    if (variables) {
+      body.variables = variables;
+    }
+
+    if (firstName) {
+      body.operationName = firstName;
+    }
+
+    this.setState({variablesSyntaxError: '', body});
     this.props.onChange(this._graphQLToString(body));
   }
 
@@ -174,7 +197,7 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
 
   _handleVariablesChange (variables: string): void {
     try {
-      const variablesObj = JSON.parse(variables || '{}');
+      const variablesObj = JSON.parse(variables || 'null');
       this._handleBodyChange(this.state.body.query, variablesObj);
     } catch (err) {
       this.setState({variablesSyntaxError: err.message});
@@ -182,21 +205,25 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
   }
 
   _stringToGraphQL (text: string): GraphQLBody {
-    let obj;
+    let obj: GraphQLBody;
     try {
       obj = JSON.parse(text);
     } catch (err) {
-      obj = {query: '', variables: {}};
+      obj = {query: ''};
     }
 
     if (typeof obj.variables === 'string') {
-      obj.variables = jsonParseOr(obj.variables, {});
+      obj.variables = jsonParseOr(obj.variables, '');
     }
 
-    return {
-      query: obj.query || '',
-      variables: obj.variables || {}
-    };
+    const query = obj.query || '';
+    const variables = obj.variables || null;
+
+    if (variables) {
+      return {query, variables};
+    } else {
+      return {query};
+    }
   }
 
   _graphQLToString (body: GraphQLBody): string {

package-lock.json

@@ -5465,11 +5465,11 @@
       "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
     },
     "graphql": {
-      "version": "0.10.5",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.10.5.tgz",
-      "integrity": "sha512-Q7cx22DiLhwHsEfUnUip1Ww/Vfx7FS0w6+iHItNuN61+XpegHSa3k5U0+6M5BcpavQImBwFiy0z3uYwY7cXMLQ==",
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.11.7.tgz",
+      "integrity": "sha512-x7uDjyz8Jx+QPbpCFCMQ8lltnQa4p4vSYHx6ADe8rVYRTdsyhCJbvSty5DAsLVmU6cGakl+r8HQYolKHxk/tiw==",
       "requires": {
-        "iterall": "1.1.1"
+        "iterall": "1.1.3"
       }
     },
     "graphql-language-service-config": {
@@ -5490,6 +5490,16 @@
         "graphql-language-service-parser": "0.0.15",
         "graphql-language-service-types": "0.0.21",
         "graphql-language-service-utils": "0.0.17"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.10.5.tgz",
+          "integrity": "sha512-Q7cx22DiLhwHsEfUnUip1Ww/Vfx7FS0w6+iHItNuN61+XpegHSa3k5U0+6M5BcpavQImBwFiy0z3uYwY7cXMLQ==",
+          "requires": {
+            "iterall": "1.1.3"
+          }
+        }
       }
     },
     "graphql-language-service-parser": {
@@ -5506,6 +5516,16 @@
       "integrity": "sha512-/fSs1JmGEee8IPd7a7FJRmzK1o0W35nJZO0aJSGk2mq7QCvyKqNC8rgKG5YozAEj4ZY2psKUIxIpm6ssCTuUbw==",
       "requires": {
         "graphql": "0.10.5"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.10.5.tgz",
+          "integrity": "sha512-Q7cx22DiLhwHsEfUnUip1Ww/Vfx7FS0w6+iHItNuN61+XpegHSa3k5U0+6M5BcpavQImBwFiy0z3uYwY7cXMLQ==",
+          "requires": {
+            "iterall": "1.1.3"
+          }
+        }
       }
     },
     "graphql-language-service-utils": {
@@ -5515,6 +5535,16 @@
       "requires": {
         "graphql": "0.10.5",
         "graphql-language-service-types": "0.0.21"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.10.5.tgz",
+          "integrity": "sha512-Q7cx22DiLhwHsEfUnUip1Ww/Vfx7FS0w6+iHItNuN61+XpegHSa3k5U0+6M5BcpavQImBwFiy0z3uYwY7cXMLQ==",
+          "requires": {
+            "iterall": "1.1.3"
+          }
+        }
       }
     },
     "growly": {
@@ -7226,9 +7256,9 @@
       }
     },
     "iterall": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.1.1.tgz",
-      "integrity": "sha1-9/CvEemgTsZCYmD1AZ2fzKTVAhQ="
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.1.3.tgz",
+      "integrity": "sha512-Cu/kb+4HiNSejAPhSaN1VukdNTTi/r4/e+yykqjlG/IW+1gZH5b4+Bq3whDX4tvbYugta3r8KTMUiqT3fIGxuQ=="
     },
     "jest": {
       "version": "19.0.2",

package.json

@@ -125,7 +125,7 @@
     "electron-context-menu": "^0.9.0",
     "electron-devtools-installer": "^2.2.0",
     "electron-squirrel-startup": "^1.0.0",
-    "graphql": "^0.10.5",
+    "graphql": "^0.11.7",
     "hawk": "^6.0.2",
     "highlight.js": "^9.12.0",
     "hkdf": "^0.0.2",