Updated GQL Query Editor code to show autocompletion

components/graphql/queryeditor.vue

@@ -7,7 +7,9 @@ const DEFAULT_THEME = "twilight";
 
 import ace from "ace-builds";
 import * as gql from "graphql";
+import { getAutocompleteSuggestions } from "graphql-language-service-interface";
 import "ace-builds/webpack-resolver";
+import "ace-builds/src-noconflict/ext-language_tools";
 import debounce from "../../functions/utils/debounce";
 
 export default {
@@ -57,12 +59,39 @@ export default {
   },
 
   mounted() {
+    let langTools = ace.require("ace/ext/language_tools");
+
     const editor = ace.edit(this.$refs.editor, {
       theme: "ace/theme/" + this.defineTheme(),
       mode: "ace/mode/" + this.lang,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
       ...this.options
     });
 
+    const completer = {
+      getCompletions: (editor, _session, pos, _prefix, callback) => {
+        if (this.validationSchema) {
+          const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), { line: pos.row, character: pos.column });
+
+          callback(null,
+            completions.map((completion) => {
+              return {
+                name: completion.label,
+                value: completion.label,
+                score: 1.0,
+                meta: completion.detail
+              };
+            })
+          );
+        } else {
+          callback(null, []);
+        }
+      }
+    };
+
+    langTools.setCompleters([completer]);
+
     if (this.value) editor.setValue(this.value, 1);
 
     this.editor = editor;