Merge pull request #505 from AndrewBastin/feat/gql-query-errors

Syntax Error marking in GraphQL query editor

components/graphql/queryeditor.vue

@@ -0,0 +1,113 @@
+<template>
+  <pre ref="editor"></pre>
+</template>
+
+<script>
+const DEFAULT_THEME = "twilight";
+
+import ace from "ace-builds";
+import * as gql from "graphql";
+
+import "ace-builds/webpack-resolver";
+import debounce from '../../functions/utils/debounce';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: String,
+      required: false
+    },
+    lang: {
+      type: String,
+      default: "json"
+    },
+    options: {
+      type: Object,
+      default: {}
+    }
+  },
+
+  data() {
+    return {
+      editor: null,
+      cacheValue: ""
+    };
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1);
+        this.cacheValue = value;
+      }
+    },
+    theme() {
+      this.editor.setTheme("ace/theme/" + this.defineTheme());
+    },
+    lang(value) {
+      this.editor.getSession().setMode("ace/mode/" + value);
+    },
+    options(value) {
+      this.editor.setOptions(value);
+    }
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      theme: "ace/theme/" + this.defineTheme(),
+      mode: "ace/mode/" + this.lang,
+      ...this.options
+    });
+
+    if (this.value) editor.setValue(this.value, 1);
+
+    this.editor = editor;
+    this.cacheValue = this.value;
+
+    editor.on("change", () => {
+      const content = editor.getValue();
+      this.$emit("input", content);
+      
+      this.parseContents(content)
+
+      this.cacheValue = content;
+    });
+
+    this.parseContents(this.value);
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme;
+      } else {
+        return (
+          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+        );
+      }
+    },
+
+    parseContents: debounce(function (content) {
+      try {
+        gql.parse(content);
+      } catch (e) {
+        this.editor.session.setAnnotations([{
+          row: e.locations[0].line - 1,
+          column: e.locations[0].column - 1,
+          text: e.message,
+          type: "error"
+        }]);
+      }
+    }, 2000)
+  },
+
+  beforeDestroy() {
+    this.editor.destroy();
+    this.editor.container.remove();
+  }
+};
+</script>

functions/utils/debounce.js

@@ -0,0 +1,15 @@
+// Debounce is a higher order function which makes its enclosed function be executed
+// only if the function wasn't called again till 'delay' time has passed, this helps reduce impact of heavy working
+// functions which might be called frequently
+// NOTE : Don't use lambda functions as this doesn't get bound properly in them, use the 'function (args) {}' format
+const debounce = (func, delay) => {
+  let inDebounce
+  return function() {
+    const context = this
+    const args = arguments
+    clearTimeout(inDebounce)
+    inDebounce = setTimeout(() => func.apply(context, args), delay)
+  }
+}
+
+export default debounce;

pages/graphql.vue

@@ -175,7 +175,8 @@
               </button>
             </div>
           </div>
-          <Editor
+          <QueryEditor
+            ref="queryEditor"
             v-model="gqlQueryString"
             :options="{
               maxLines: responseBodyMaxLines,
@@ -391,6 +392,7 @@ import axios from "axios";
 import * as gql from "graphql";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
 import AceEditor from "../components/ace-editor";
+import QueryEditor from "../components/graphql/queryeditor";
 import { sendNetworkRequest } from "../functions/network";
 
 export default {
@@ -402,7 +404,8 @@ export default {
     "gql-field": () => import("../components/graphql/field"),
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
-    Editor: AceEditor
+    Editor: AceEditor,
+    QueryEditor: QueryEditor
   },
   data() {
     return {
@@ -543,6 +546,7 @@ export default {
       responseBodyMaxLines: 16
     };
   },
+
   computed: {
     url: {
       get() {