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 +