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.

[ticky]

I wonder if we’d want to do the lazy-load-on-hover trick here? I did it in ImageUploadField:

frontend/app/components/shared/ImageUploadField.js

Lines 149 to 150 in bb8aaed

	// Make sure we're loading the image processing code now the user is dragging something around
	this.getLoadImage();

frontend/app/components/shared/ImageUploadField.js

Lines 205 to 213 in bb8aaed

	getLoadImage = () => {
	// If we don't have our import promise stored, create it
	if (!this._loadImage) {
	this._loadImage = import('blueimp-load-image');
	}
	// Finally, return the promise
	return this._loadImage;
	}

frontend/app/components/shared/ImageUploadField.js

Lines 215 to 219 in bb8aaed

	withLoadImage = (callback: Function) => {
	// Call back with the default loadImage
	// function, once the import promise resolves
	this.getLoadImage().then((module) => callback(module.default));
	}

[plasticine]

brb implementing prettier in dev... 😉😜

[ticky]

@keithpitt are you still planning to land this?