diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 6378f5f09..8503c1804 100644
--- a/components/graphql/queryeditor.vue
+++ b/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
diff --git a/lang/en-US.js b/lang/en-US.js
index 811b98210..261eb18c0 100644
--- a/lang/en-US.js
+++ b/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",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index cce5689ae..1a2f52508 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -178,6 +178,13 @@
>
file_copy
+