Add a "Prettify" button to the in-app GraphQL Console

[keithpitt]

Does what is says on the Tin!

GraphiQL (the editor that this is loosely based on) uses a pretty basic way of doing "prettification"

print(parse(query))

Essentially it parses the query into an AST, and re-prints the AST with some standard formatting rules. The biggest drawback with this approach is that comments aren't part of the AST, so they're dropped on the floor after hitting the "pretty" button - which is kinda shitty.

I've opted for pulling in the "prettier" package instead and which does do the right thing with comments. I'm doing a magical Webpack import thing since it's only used in this one place and there's no need to import for everything and bloat the main packages - hopefully I did it right!

[ticky]

Wow, I was going to ask “how big is Prettier?” and yikes!

Good call lazy-loading.

[plasticine]

brb implementing prettier in dev... 😉😜

[ticky]

@keithpitt are you still planning to land this?