Merge pull request #534 from AndrewBastin/feat/gql-variable-update

Updated GraphQL Query Variable Editor

pages/graphql.vue

@@ -187,67 +187,21 @@
               useWorker: false
             }"
           />
-          <div class="flex-wrap">
-            <label>{{ $t("query_variables") }}</label>
-            <div>
-              <button
-                class="icon"
-                @click="variables = []"
-                v-tooltip.bottom="$t('clear')"
-              >
-                <i class="material-icons">clear_all</i>
-              </button>
-            </div>
-          </div>
-          <ul v-for="(variable, index) in variables" :key="index">
-            <li>
-              <input
-                :placeholder="$t('variable_count', { count: index + 1 })"
-                :name="'variable_key_' + index"
-                :value="variable.key"
-                @change="
-                  $store.commit('setGQLVariableKey', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="$t('value_count', { count: index + 1 })"
-                :name="'variable_value_' + index"
-                :value="variable.value"
-                @change="
-                  $store.commit('setGQLVariableValue', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeQueryVariable(index)"
-                  v-tooltip.bottom="$t('delete')"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addQueryVariable">
-                <i class="material-icons">add</i>
-                <span>{{ $t("add_new") }}</span>
-              </button>
-            </li>
-          </ul>
+        </pw-section>
+
+        <pw-section class="yellow" label="Variables" ref="variables">
+          <Editor
+            v-model="variableString"
+            :lang="'json'"
+            :options="{
+              maxLines: responseBodyMaxLines,
+              minLines: '16',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
         </pw-section>
 
         <pw-section class="purple" label="Response" ref="response">
@@ -564,14 +518,6 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "headers" });
       }
     },
-    variables: {
-      get() {
-        return this.$store.state.gql.variables;
-      },
-      set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "variables" });
-      }
-    },
     gqlQueryString: {
       get() {
         return this.$store.state.gql.query;
@@ -580,6 +526,14 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "query" });
       }
     },
+    variableString: {
+      get() {
+        return this.$store.state.gql.variablesJSONString;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "variablesJSONString" });
+      }
+    },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)
@@ -666,19 +620,10 @@ export default {
         this.headers.forEach(header => {
           headers[header.key] = header.value;
         });
+        
+        let variables = JSON.parse(this.variableString);
 
-        let variables = {};
         const gqlQueryString = this.gqlQueryString;
-        this.variables.forEach(variable => {
-          // todo: better variable type validation
-          if (gqlQueryString.indexOf(`\$${variable.key}: Int`) > -1) {
-            variables[variable.key] = parseInt(variable.value);
-          } else if (gqlQueryString.indexOf(`\$${variable.key}: Float`) > -1) {
-            variables[variable.key] = parseFloat(variable.value);
-          } else {
-            variables[variable.key] = variable.value;
-          }
-        });
 
         const reqOptions = {
           method: "post",
@@ -879,30 +824,6 @@ export default {
       });
       // console.log(oldHeaders);
     },
-    addQueryVariable(index) {
-      this.$store.commit("addGQLVariable", {
-        key: "",
-        value: ""
-      });
-      return false;
-    },
-    removeQueryVariable(index) {
-      const oldVariables = this.variables.slice();
-
-      this.$store.commit("removeGQLVariable", index);
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-        action: {
-          text: this.$t("undo"),
-          duration: 4000,
-          onClick: (e, toastObject) => {
-            this.variables = oldVariables;
-            toastObject.remove();
-          }
-        }
-      });
-      // console.log(oldVariables);
-    },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
         behavior: "smooth"

store/mutations.js

@@ -23,22 +23,6 @@ export default {
     gql.headers[index].value = value;
   },
 
-  addGQLVariable({ gql }, object) {
-    gql.variables.push(object);
-  },
-
-  removeGQLVariable({ gql }, index) {
-    gql.variables.splice(index, 1);
-  },
-
-  setGQLVariableKey({ gql }, { index, value }) {
-    gql.variables[index].key = value;
-  },
-
-  setGQLVariableValue({ gql }, { index, value }) {
-    gql.variables[index].value = value;
-  },
-
   addHeaders({ request }, value) {
     request.headers.push(value);
   },

store/state.js

@@ -20,7 +20,7 @@ export default () => ({
   gql: {
     url: "https://rickandmortyapi.com/graphql",
     headers: [],
-    variables: [],
+    variablesJSONString: "",
     query: ""
   },
   oauth2: {