From 9ad822577b124968c25f1a2c1624fd2cf525fb16 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 26 Nov 2019 15:37:41 -0500
Subject: [PATCH 1/5] Added ability to do GraphQL queries

---
 pages/graphql.vue | 91 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 89552ca39..dec0ce601 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -150,6 +150,41 @@
             }"
           />
         </pw-section>
+        <pw-section class="cyan" label="Query" ref="query">
+          <div class="flex-wrap">
+            <label for="gqlQuery">Query</label>
+            <div>
+              <button
+                  class="icon"
+                  @click="runQuery()"
+                  v-tooltip.bottom="'Run Query'"
+              >
+                <i class="material-icons">play_arrow</i>
+              </button>
+            </div>
+          </div>
+          <textarea
+            id="gqlQuery"
+            rows="8"
+            v-model="gqlQueryString">
+          ></textarea>
+        </pw-section>
+        <pw-section class="purple" label="Response" ref="response">
+          <label for="responseField"></label>
+          <Editor
+            :value="responseString"
+            :lang="'json'"
+            :options="{
+              maxLines: responseBodyMaxLines,
+              minLines: '16',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              readOnly: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
+        </pw-section>
       </div>
       <aside class="sticky-inner inner-right">
         <pw-section class="purple" label="Docs" ref="docs">
@@ -252,6 +287,8 @@ export default {
       mutationFields: [],
       subscriptionFields: [],
       gqlTypes: [],
+      gqlQueryString: "",
+      responseString: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       downloadButton: '<i class="material-icons">get_app</i>',
       doneButton: '<i class="material-icons">done</i>',
@@ -301,6 +338,60 @@ export default {
         1000
       );
     },
+    async runQuery() {
+      const startTime = Date.now();
+
+      this.$nuxt.$loading.start();
+
+      try {
+        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: JSON.stringify({ query: this.gqlQueryString })
+        };
+
+        const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
+          ? {
+              method: "post",
+              url:
+                this.$store.state.postwoman.settings.PROXY_URL ||
+                `https://postwoman.apollotv.xyz/`,
+              data: reqOptions
+            }
+          : reqOptions;
+
+        const res = await axios(reqConfig);
+
+        const data = this.$store.state.postwoman.settings.PROXY_ENABLED
+          ? res.data
+          : res;
+
+        this.responseString = JSON.stringify(data.data, null, 2);
+        
+        this.$nuxt.$loading.finish();
+        const duration = Date.now() - startTime;
+        this.$toast.info(`Finished in ${duration}ms`, {
+          icon: "done"
+        });
+      } catch (error) {
+        this.$nuxt.$loading.finish();
+
+        this.$toast.error(error + " (F12 for details)", {
+          icon: "error"
+        });
+        console.log("Error", error);
+      }
+
+    },
     async getSchema() {
       const startTime = Date.now();
       this.schemaString = "Loading...";

From 7fab6f4732df1f0a9739017a93e4bccc41e2b627 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 26 Nov 2019 15:43:06 -0500
Subject: [PATCH 2/5] Added query field to the GQL state

---
 store/state.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/store/state.js b/store/state.js
index 99cc7900b..67d07376a 100644
--- a/store/state.js
+++ b/store/state.js
@@ -19,6 +19,7 @@ export default () => ({
   },
   gql: {
     url: 'https://rickandmortyapi.com/graphql',
-    headers: []
+    headers: [],
+    query: ""
   }
 });

From ded69f979e91f8d63f476fda21a1e7d1f6bfa8d0 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 26 Nov 2019 15:44:15 -0500
Subject: [PATCH 3/5] Entered GQL query is persisted

---
 pages/graphql.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index dec0ce601..a74be59ab 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -287,7 +287,6 @@ export default {
       mutationFields: [],
       subscriptionFields: [],
       gqlTypes: [],
-      gqlQueryString: "",
       responseString: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       downloadButton: '<i class="material-icons">get_app</i>',
@@ -313,6 +312,14 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "headers" });
       }
     },
+    gqlQueryString: {
+      get() {
+        return this.$store.state.gql.query;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "query" });
+      }
+    },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)

From 9cbd6ea7b7b3f1f516601b17e4afd8f3e26d3f12 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 26 Nov 2019 16:48:13 -0500
Subject: [PATCH 4/5] Added ability to copy GQL query

---
 pages/graphql.vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index a74be59ab..7ad3e813c 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -155,12 +155,20 @@
             <label for="gqlQuery">Query</label>
             <div>
               <button
-                  class="icon"
-                  @click="runQuery()"
-                  v-tooltip.bottom="'Run Query'"
+                class="icon"
+                @click="runQuery()"
+                v-tooltip.bottom="'Run Query'"
               >
                 <i class="material-icons">play_arrow</i>
               </button>
+              <button
+                class="icon"
+                @click="copyQuery"
+                ref="copyQueryButton"
+                v-tooltip="'Copy Query'"
+              >
+                <i class="material-icons">file_copy</i>
+              </button>
             </div>
           </div>
           <textarea
@@ -345,6 +353,22 @@ export default {
         1000
       );
     },
+    copyQuery() {
+      this.$refs.copyQueryButton.innerHTML = this.doneButton;
+      const aux = document.createElement("textarea");
+      aux.innerText = this.gqlQueryString;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
+      this.$toast.success("Copied to clipboard", {
+        icon: "done"
+      });
+      setTimeout(
+        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
+        1000
+      );
+    },
     async runQuery() {
       const startTime = Date.now();
 

From d2115ab004fbab04be3ede8b442a8bc9842bbca4 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 26 Nov 2019 16:55:43 -0500
Subject: [PATCH 5/5] Added ability to copy GQL response

---
 pages/graphql.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 7ad3e813c..efa6437fb 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -178,7 +178,19 @@
           ></textarea>
         </pw-section>
         <pw-section class="purple" label="Response" ref="response">
-          <label for="responseField"></label>
+          <div class="flex-wrap">
+            <label for="responseField">Response</label>
+            <div>
+              <button
+                class="icon"
+                @click="copyResponse"
+                ref="copyResponseButton"
+                v-tooltip="'Copy Response'"
+              >
+                <i class="material-icons">file_copy</i>
+              </button>
+            </div>
+          </div>
           <Editor
             :value="responseString"
             :lang="'json'"
@@ -369,6 +381,22 @@ export default {
         1000
       );
     },
+    copyResponse() {
+      this.$refs.copyResponseButton.innerHTML = this.doneButton;
+      const aux = document.createElement("textarea");
+      aux.innerText = this.responseString;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
+      this.$toast.success("Copied to clipboard", {
+        icon: "done"
+      });
+      setTimeout(
+        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
+        1000
+      );
+    },
     async runQuery() {
       const startTime = Date.now();