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 
     };
   },
 
@@ -87,19 +88,42 @@ export default {
         );
       }
     },
+    
+    setValidationSchema(schema) {
+      this.validationSchema = schema;
+      this.parseContents(this.cacheValue);
+    },
 
     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"
+      if (content !== "") {
+        try {
+          const doc = gql.parse(content);
+
+          if (this.validationSchema) {
+            this.editor.session.setAnnotations(
+              gql.validate(this.validationSchema, doc)
+                .map((err) => {
+                  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

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