Merge pull request #650 from AndrewBastin/feat/gql-query-prettify

Added the ability to prettify GraphQL queries

components/graphql/queryeditor.vue

@@ -147,6 +147,15 @@ export default {
       },
     })
 
+    editor.commands.addCommand({
+      name: "prettifyGQLQuery",
+      exec: () => this.prettifyQuery(),
+      bindKey: {
+        mac: "cmd-p",
+        win: "ctrl-p",
+      },
+    })
+
     editor.on("change", () => {
       const content = editor.getValue()
       this.$emit("input", content)
@@ -158,6 +167,16 @@ export default {
   },
 
   methods: {
+    prettifyQuery() {
+      try {
+        this.value = gql.print(gql.parse(this.editor.getValue()))
+      } catch (e) {
+        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
+          icon: "error",
+        })
+      }
+    },
+
     defineTheme() {
       if (this.theme) {
         return this.theme

lang/en-US.js

@@ -182,6 +182,9 @@ export default {
   waiting_send_req: "(waiting to send request)",
   waiting_receive_response: "(waiting to receive response)",
   waiting_receive_schema: "(waiting to receive schema)",
+  gql_prettify_invalid_query:
+    "Couldn't prettify an invalid query, solve query syntax errors and try again",
+  prettify_query: "Prettify Query",
   cancel: "Cancel",
   save: "Save",
   dismiss: "Dismiss",

pages/graphql.vue

@@ -178,6 +178,13 @@
               >
                 <i class="material-icons">file_copy</i>
               </button>
+              <button
+                class="icon"
+                @click="doPrettifyQuery"
+                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+              >
+                <i class="material-icons">photo_filter</i>
+              </button>
             </div>
           </div>
           <QueryEditor
@@ -452,6 +459,9 @@ export default {
   },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
+    doPrettifyQuery() {
+      this.$refs.queryEditor.prettifyQuery()
+    },
     handleJumpToType(type) {
       const typesTab = document.getElementById("gqltypes-tab")
       typesTab.checked = true