Merge pull request #508 from AndrewBastin/feat/gql-query-schema-val

GraphQL query validation based on schema

components/graphql/queryeditor.vue

@@ -33,7 +33,8 @@ export default {
   data() {
     return {
       editor: null,
-      cacheValue: ""
+      cacheValue: "",
+      validationSchema: null 
     };
   },
 
@@ -88,18 +89,41 @@ export default {
       }
     },
     
+    setValidationSchema(schema) {
+      this.validationSchema = schema;
+      this.parseContents(this.cacheValue);
+    },
+
     parseContents: debounce(function(content) {
-      try {
+      if (content !== "") {
-        gql.parse(content);
+        try {
-      } catch (e) {
+          const doc = gql.parse(content);
-        this.editor.session.setAnnotations([
+
-          {
+          if (this.validationSchema) {
-            row: e.locations[0].line - 1,
+            this.editor.session.setAnnotations(
-            column: e.locations[0].column - 1,
+              gql.validate(this.validationSchema, doc)
-            text: e.message,
+                .map((err) => {
-            type: "error"
+                  return {
+                    row: err.locations[0].line - 1,
+                    column: err.locations[0].column - 1,
+                    text: err.message,
+                    type: "error"
+                  }
+                })
+            )
           }
-        ]);
+        } catch (e) {
+          this.editor.session.setAnnotations([
+            {
+              row: e.locations[0].line - 1,
+              column: e.locations[0].column - 1,
+              text: e.message,
+              type: "error"
+            }
+          ]);
+        }
+      } else {
+        this.editor.session.setAnnotations([]);
       }
     }, 2000)
   },

pages/graphql.vue

@@ -813,6 +813,8 @@ export default {
         }
         this.gqlTypes = types;
         
+        this.$refs.queryEditor.setValidationSchema(schema);
+
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
         this.$toast.info(this.$t("finished_in", { duration }), {