[PR #650] [MERGED] Added the ability to prettify GraphQL queries #2770

New issue

Closed

opened 2026-03-17 00:26:45 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:26:45 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/650
Author: @AndrewBastin
Created: 3/5/2020
Status: ✅ Merged
Merged: 3/6/2020
Merged by: @AndrewBastin

Base: master ← Head: feat/gql-query-prettify

📝 Commits (6)

7dd4db1 Added prettifying to GQL Query Editor
a9ba2b5 Added error handling to query prettify to prevent event propagation
cb0de46 Added i10n entry for invalid GQL Query prettification
64091c1 GQL Query Editor shows toast on prettifying invalid queries
30ee570 Added i10n entry for prettify query
e4abe4e Added prettify query button for GraphQL queries

📊 Changes

3 files changed (+32 additions, -0 deletions)

View changed files

📝 components/graphql/queryeditor.vue (+19 -0)
📝 lang/en-US.js (+3 -0)
📝 pages/graphql.vue (+10 -0)

📄 Description

This PR intends to add the ability to do GraphQL query prettification. It adds a editor shortcut (cmd-p or ctrl-p) and also a button above the query editor to do prettification.

I am not a pretty big fan of the icon for the prettify button, I had that auto-fix magic wand icon in my mind but I think it is removed from the material icons collection now. @liyasthomas it would be awesome if you could replace that with something more aesthetically pleasing.

NOTE to Translators: Added new entries for i10n

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/650 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 3/5/2020 **Status:** ✅ Merged **Merged:** 3/6/2020 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `master` ← **Head:** `feat/gql-query-prettify` --- ### 📝 Commits (6) - [`7dd4db1`](https://github.com/hoppscotch/hoppscotch/commit/7dd4db13a10784c2b2b6106b7f57e1531193dc8e) Added prettifying to GQL Query Editor - [`a9ba2b5`](https://github.com/hoppscotch/hoppscotch/commit/a9ba2b50f9167b41c397ddc30057e8a6ac7234d7) Added error handling to query prettify to prevent event propagation - [`cb0de46`](https://github.com/hoppscotch/hoppscotch/commit/cb0de46e7dbbf7ff15fee793f1899e03acb1c382) Added i10n entry for invalid GQL Query prettification - [`64091c1`](https://github.com/hoppscotch/hoppscotch/commit/64091c1f29585a7e5bcc899b1d658cb916b208f6) GQL Query Editor shows toast on prettifying invalid queries - [`30ee570`](https://github.com/hoppscotch/hoppscotch/commit/30ee570ef7daa06794182f8082a651ffba044b90) Added i10n entry for prettify query - [`e4abe4e`](https://github.com/hoppscotch/hoppscotch/commit/e4abe4efd558b3cac50f920e878a45073acbde9f) Added prettify query button for GraphQL queries ### 📊 Changes **3 files changed** (+32 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `components/graphql/queryeditor.vue` (+19 -0) 📝 `lang/en-US.js` (+3 -0) 📝 `pages/graphql.vue` (+10 -0) </details> ### 📄 Description This PR intends to add the ability to do GraphQL query prettification. It adds a editor shortcut (`cmd-p` or `ctrl-p`) and also a button above the query editor to do prettification. I am not a pretty big fan of the icon for the prettify button, I had that auto-fix magic wand icon in my mind but I think it is removed from the material icons collection now. @liyasthomas it would be awesome if you could replace that with something more aesthetically pleasing. **NOTE to Translators: Added new entries for i10n** --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>