Refactor Docs generation from GQL Schema to a separate function

pages/graphql.vue

@@ -541,43 +541,9 @@ export default {
         console.log("Error", error)
       }
     },
-    async getSchema() {
-      const startTime = Date.now()
-
-      // Start showing the loading bar as soon as possible.
-      // The nuxt axios module will hide it when the request is made.
-      this.$nuxt.$loading.start()
-
-      this.schema = this.$t("loading")
-      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("schema")
-
-      try {
-        const query = JSON.stringify({
-          query: gql.getIntrospectionQuery(),
-        })
-
-        let headers = {}
-        this.headers.forEach((header) => {
-          headers[header.key] = header.value
-        })
-
-        const reqOptions = {
-          method: "post",
-          url: this.url,
-          headers: {
-            ...headers,
-            "content-type": "application/json",
-          },
-          data: query,
-        }
-
-        const data = await sendNetworkRequest(reqOptions, this.$store)
-
-        const schema = gql.buildClientSchema(data.data.data)
-        this.schema = gql.printSchema(schema, {
-          commentDescriptions: true,
-        })
 
+    // NOTE : schema required here is the GQL Schema document object, not the schema string
+    getDocsFromSchema(schema) {
       if (schema.getQueryType()) {
         const fields = schema.getQueryType().getFields()
         const qFields = []
@@ -624,6 +590,52 @@ export default {
         }
       }
       this.gqlTypes = types
+    },
+    async getSchema() {
+      const startTime = Date.now()
+
+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
+      this.$nuxt.$loading.start()
+
+      this.schema = this.$t("loading")
+      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("schema")
+
+      try {
+        const query = JSON.stringify({
+          query: gql.getIntrospectionQuery(),
+        })
+
+        let headers = {}
+        this.headers.forEach((header) => {
+          headers[header.key] = header.value
+        })
+
+        const reqOptions = {
+          method: "post",
+          url: this.url,
+          headers: {
+            ...headers,
+            "content-type": "application/json",
+          },
+          data: query,
+        }
+
+        const data = await sendNetworkRequest(reqOptions, this.$store)
+
+        const schema = gql.buildClientSchema(data.data.data)
+
+        this.$store.commit("setGQLState", {
+          value: JSON.stringify(data.data.data),
+          attribute: "schemaIntrospection",
+        })
+
+        this.schema = gql.printSchema(schema, {
+          commentDescriptions: true,
+        })
+
+        this.getDocsFromSchema(schema)
+
         this.$refs.queryEditor.setValidationSchema(schema)
         this.$nuxt.$loading.finish()
         const duration = Date.now() - startTime