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,9 +89,29 @@ export default {
       }
     },
     
+    setValidationSchema(schema) {
+      this.validationSchema = schema;
+      this.parseContents(this.cacheValue);
+    },
+
     parseContents: debounce(function(content) {
+      if (content !== "") {
         try {
-        gql.parse(content);
+          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([
             {
@@ -101,6 +122,9 @@ export default {
             }
           ]);
         }
+      } 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 }), {