🎉 Added variables to graphql page (w/ lame type validation).

lang/de-DE.js

@@ -66,6 +66,7 @@ export default {
   response: "Antwort",
   query: "Abfrage",
   queries: "Abfragen",
+  query_variables: "Variablen",
   mutations: "Mutationen",
   subscriptions: "Abonnements",
   types: "Typen",

lang/en-US.js

@@ -66,6 +66,7 @@ export default {
   response: "Response",
   query: "Query",
   queries: "Queries",
+  query_variables: "Variables",
   mutations: "Mutations",
   subscriptions: "Subscriptions",
   types: "Types",

lang/es-ES.js

@@ -66,6 +66,7 @@ export default {
   response: "Respuesta",
   query: "Consulta",
   queries: "Consultas",
+  query_variables: "Variables",
   mutations: "Mutaciones",
   subscriptions: "Subscripciones",
   types: "Tipos",

lang/fa-IR.js

@@ -66,6 +66,7 @@ export default {
   response: "Response",
   query: "Query",
   queries: "Queries",
+  query_variables: "Variables",
   mutations: "Mutations",
   subscriptions: "Subscriptions",
   types: "Types",

lang/fr-FR.js

@@ -66,6 +66,7 @@ export default {
   response: "Réponse",
   query: "Requête",
   queries: "Requêtes",
+  query_variables: "Variables",
   mutations: "Mutations",
   subscriptions: "Abonnements",
   types: "Types",

lang/id-ID.js

@@ -66,6 +66,7 @@ export default {
   response: "Balasan",
   query: "Kueri",
   queries: "Kueri",
+  query_variables: "Variables",
   mutations: "Mutasi",
   subscriptions: "Langganan",
   types: "Jenis",

lang/ja-JP.js

@@ -66,6 +66,7 @@ export default {
   response: "レスポンス",
   query: "クエリ",
   queries: "クエリ",
+  query_variables: "変数 (へんすう)",
   mutations: "ミューテーション",
   subscriptions: "サブスクリプション",
   types: "タイプ",

lang/pt-BR.js

@@ -66,6 +66,7 @@ export default {
   response: "Response",
   query: "Query",
   queries: "Queries",
+  query_variables: "Variáveis",
   mutations: "Mutações",
   subscriptions: "Assinaturas",
   types: "Tipos",

lang/tr-TR.js

@@ -66,6 +66,7 @@ export default {
   response: "Cevap",
   query: "Sorgu",
   queries: "Sorgular",
+  query_variables: "Değişkenler",
   mutations: "Değişimler",
   subscriptions: "Aboneler",
   types: "Tipler",

lang/zh-CN.js

@@ -66,6 +66,7 @@ export default {
   response: "响应",
   query: "查询",
   queries: "查询",
+  query_variables: "变数",
   mutations: "Mutations",
   subscriptions: "订阅",
   types: "种类",

package-lock.json

@@ -11286,8 +11286,7 @@
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true,
+                            "bundled": true
-                            "optional": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -11427,7 +11426,6 @@
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -11444,7 +11442,6 @@
                         "mkdirp": {
                             "version": "0.5.1",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "minimist": "0.0.8"
                             }
@@ -11536,7 +11533,6 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -11612,8 +11608,7 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true,
+                            "bundled": true
-                            "optional": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -11643,7 +11638,6 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -11700,13 +11694,11 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true,
+                            "bundled": true
-                            "optional": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true,
+                            "bundled": true
-                            "optional": true
                         }
                     }
                 },

pages/graphql.vue

@@ -185,6 +185,66 @@
               useWorker: false
             }"
           />
+          <div class="flex-wrap">
+            <label>{{ $t("query_variables") }}</label>
+            <div>
+              <button
+                class="icon"
+                @click="headers = []"
+                v-tooltip.bottom="'Clear'"
+              >
+                <i class="material-icons">clear_all</i>
+              </button>
+            </div>
+          </div>
+          <ul v-for="(variable, index) in variables" :key="index">
+            <li>
+              <input
+                :placeholder="'variable ' + (index + 1)"
+                :name="'variable_key_' + index"
+                :value="variable.key"
+                @change="
+                  $store.commit('setGQLVariableKey', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
+                autofocus
+                />
+            </li>
+            <li>
+              <input
+                :placeholder="'value ' + (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)"
+                >
+                  <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="purple" label="Response" ref="response">
@@ -294,8 +354,8 @@
             class="info"
           >
             Send a request first
-          </p></pw-section
+          </p>
-        >
+        </pw-section>
       </aside>
     </div>
   </div>
@@ -481,6 +541,14 @@ 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;
@@ -558,6 +626,24 @@ export default {
           headers[header.key] = header.value;
         });
 
+        let variables = {};
+        const gqlQueryString = this.gqlQueryString;
+        this.variables.forEach(variable => {
+          // todo: better variable type validation
+          const intRex = new RegExp(`\$${variable.key}\: Int`);
+          intRex.compile();
+          const floatRex = new RegExp(`\$${variable.key}\: Float`);
+          floatRex.compile();
+
+          if (intRex.test(gqlQueryString)) {
+            variables[variable.key] = parseInt(variable.value);
+          } else if (floatRex.test(gqlQueryString)) {
+            variables[variable.key] = parseFloat(variable.value);
+          } else {
+            variables[variable.key] = variable.value;
+          }
+        });
+
         const reqOptions = {
           method: "post",
           url: this.url,
@@ -565,7 +651,7 @@ export default {
             ...headers,
             "content-type": "application/json"
           },
-          data: JSON.stringify({ query: this.gqlQueryString })
+          data: JSON.stringify({ query: gqlQueryString, variables })
         };
 
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
@@ -771,6 +857,30 @@ 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("Deleted", {
+        icon: "delete",
+        action: {
+          text: "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,6 +23,22 @@ 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,6 +20,7 @@ export default () => ({
   gql: {
     url: "https://rickandmortyapi.com/graphql",
     headers: [],
+    variables: [],
     query: ""
   }
 });