ProxymanApp / Proxyman

Modern. Native. Delightful Web Debugging Proxy for macOS, iOS, and Android ⚡️
https://proxyman.io
5.67k stars 187 forks source link

Enhancement: prettify GraphQL query in request Treeview (even slightly). #990

Open Bertrand opened 3 years ago

Bertrand commented 3 years ago

Today, it's very hard to read the query part in a GraphQL request :

image

This is because the whole query (which can be HUGE) is displayed as a single line.

Would it be possible to a add a prettify selector that would display the query part in a more readable format in Treeview?

I know a full-fledged query formatter is a lot of work.

But at first, simply replacing the \n characters with real carriage returns would be a HUGE improvement for us working on GraphQL projects.

NghiaTranUIT commented 3 years ago

I tried on different GraphQL Query, some of them doesn't have \n, so it's really difficult to manually prettify it.

I suppose that I will implement a GraphQL Query Prettifier, which is similar to the below GraphQL online tool 👍

Since the TreeView is an NSOutlieView (support tree-level-hierachie), and it seems that it's difficult to support multiple lines, so I'd introduce a GraphQL Tab

Screen Shot 2021-09-10 at 19 45 10
NghiaTranUIT commented 3 years ago

Hey @Bertrand Let check this Beta build: https://proxyman.s3.us-east-2.amazonaws.com/beta/Proxyman_2.32.1_GraphQL_Prettier.dmg

You can open a GraphQL Tab and it will prettify the GraphQL's query value 👍

To open GraphQL tab, please click on the + button on request bar -> It will open Custom Previewer Window -> Select GraphQL 🙌

Screen_Shot_2021-09-11_at_16_04_21 Screen Shot 2021-09-11 at 15 58 11 Screen Shot 2021-09-11 at 15 58 08
Bertrand commented 3 years ago

Wow 😄 This is such a game-changer !

Many many thanks @NghiaTranUIT

A few remarks:

image
NghiaTranUIT commented 3 years ago

Sorry for the syntax highlight for graphQL. I tried to support CodeMirror-graphQL-mode but it doesn't work well 😿

you might want to add an additional pane holding the variables, so users don't have to switch back and forth between the GrapqhQL and the json pane.

Thanks for your proposal. I will find a way to support it 👍