Save GraphQL schema and response in state

Allows the user to go to the settings page, and back to the GraphQL page, without having to re-request the schema or response.

pages/graphql.vue

@@ -140,7 +140,7 @@
             </div>
           </div>
           <Editor
-            :value="schemaString"
+            v-model="schema"
             :lang="'graphqlschema'"
             :options="{
               maxLines: responseBodyMaxLines,
@@ -219,7 +219,7 @@
             </div>
           </div>
           <Editor
-            :value="responseString"
+            :value="response"
             :lang="'json'"
             :options="{
               maxLines: responseBodyMaxLines,
@@ -364,13 +364,11 @@ export default {
   },
   data() {
     return {
-      schemaString: "",
       commonHeaders,
       queryFields: [],
       mutationFields: [],
       subscriptionFields: [],
       gqlTypes: [],
-      responseString: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       downloadButton: '<i class="material-icons">get_app</i>',
       doneButton: '<i class="material-icons">done</i>',
@@ -404,6 +402,22 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "query" });
       }
     },
+    response: {
+      get() {
+        return this.$store.state.gql.response;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "response" });
+      }
+    },
+    schema: {
+      get() {
+        return this.$store.state.gql.schema;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "schema" });
+      }
+    },
     variableString: {
       get() {
         return this.$store.state.gql.variablesJSONString;
@@ -445,7 +459,7 @@ export default {
     copySchema() {
       this.$refs.copySchemaCode.innerHTML = this.doneButton;
       const aux = document.createElement("textarea");
-      aux.innerText = this.schemaString;
+      aux.innerText = this.schema;
       document.body.appendChild(aux);
       aux.select();
       document.execCommand("copy");
@@ -477,7 +491,7 @@ export default {
     copyResponse() {
       this.$refs.copyResponseButton.innerHTML = this.doneButton;
       const aux = document.createElement("textarea");
-      aux.innerText = this.responseString;
+      aux.innerText = this.response;
       document.body.appendChild(aux);
       aux.select();
       document.execCommand("copy");
@@ -519,7 +533,7 @@ export default {
 
         const data = await sendNetworkRequest(reqOptions, this.$store);
 
-        this.responseString = JSON.stringify(data.data, null, 2);
+        this.response = JSON.stringify(data.data, null, 2);
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
@@ -537,7 +551,7 @@ export default {
     },
     async getSchema() {
       const startTime = Date.now();
-      this.schemaString = this.$t("loading");
+      this.schema = this.$t("loading");
       this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
         this.scrollInto("schema");
 
@@ -565,8 +579,6 @@ export default {
           data: query
         };
 
-        // console.log(reqOptions);
-
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
           ? {
               method: "post",
@@ -584,9 +596,14 @@ export default {
           : res;
 
         const schema = gql.buildClientSchema(data.data.data);
-        this.schemaString = gql.printSchema(schema, {
+        this.schema = gql.printSchema(schema, {
           commentDescriptions: true
         });
+        console.log(
+          gql.printSchema(schema, {
+            commentDescriptions: true
+          })
+        );
 
         if (schema.getQueryType()) {
           const fields = schema.getQueryType().getFields();
@@ -648,7 +665,7 @@ export default {
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
-        this.schemaString = `${error}. ${this.$t("check_console_details")}`;
+        this.schema = `${error}. ${this.$t("check_console_details")}`;
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
@@ -661,7 +678,7 @@ export default {
         this.responseBodyMaxLines == Infinity ? 16 : Infinity;
     },
     downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schemaString, null, 2);
+      const dataToWrite = JSON.stringify(this.schema, null, 2);
       const file = new Blob([dataToWrite], { type: "application/json" });
       const a = document.createElement("a");
       const url = URL.createObjectURL(file);

store/state.js

@@ -1,38 +1,40 @@
 export default () => ({
   request: {
-    method: "GET",
+    method: 'GET',
-    url: "https://httpbin.org",
+    url: 'https://httpbin.org',
-    path: "/get",
+    path: '/get',
-    label: "",
+    label: '',
-    auth: "None",
+    auth: 'None',
-    httpUser: "",
+    httpUser: '',
-    httpPassword: "",
+    httpPassword: '',
-    passwordFieldType: "password",
+    passwordFieldType: 'password',
-    bearerToken: "",
+    bearerToken: '',
     headers: [],
     params: [],
     bodyParams: [],
-    rawParams: "",
+    rawParams: '',
     rawInput: false,
-    requestType: "",
+    requestType: '',
-    contentType: ""
+    contentType: '',
   },
   gql: {
-    url: "https://rickandmortyapi.com/graphql",
+    url: 'https://rickandmortyapi.com/graphql',
     headers: [],
-    variablesJSONString: "{}",
+    schema: '',
-    query: ""
+    variablesJSONString: '{}',
+    query: '',
+    response: ''
   },
   oauth2: {
     tokens: [],
     tokenReqs: [],
-    tokenReqSelect: "",
+    tokenReqSelect: '',
-    tokenReqName: "",
+    tokenReqName: '',
-    accessTokenName: "",
+    accessTokenName: '',
-    oidcDiscoveryUrl: "",
+    oidcDiscoveryUrl: '',
-    authUrl: "",
+    authUrl: '',
-    accessTokenUrl: "",
+    accessTokenUrl: '',
-    clientId: "",
+    clientId: '',
-    scope: ""
+    scope: '',
-  }
+  },
-});
+})