GraphQL just got a whole lot “Prettier”!
Jon Wong
We’ve all seen the prettier hype train (and a lot of us are on it!) and while it began as an opinionated code formatter for JavaScript, it has quickly grown to take on other languages like Flow, Typescript, and CSS. As of prettier@v1.5.0, it now supports one of my favorites, GraphQL!
Let’s let the GIF do the talking:
Using prettier for GraphQL is more than just hitting the “prettify” button in GraphiQL — it’ll take into account things like maximum line-width, whether or not you like commas in your queries, breaking up long lists of arguments on to their own lines, and even works on queries embedded in your JavaScript.
If you haven’t given it a try, its really easy to get started; soon you’ll realize you and your team will stop having to nitpick things like spaces, braces, and commas and can focus on basking in the sweet glory of GraphQL!
How It All Happened
GraphQL support didn’t just happen overnight, though. It took a little bit of prodding, some tweets, some Github issues, and a couple of developers who found it wildly entertaining to add support for every corner of the language (I’m looking at you, Vjeux and Sashko!) Here’s the rundown:
It started with a tweet
While Vjeux had already given GraphQL support a shot, I only heard about this from this tweet:
Immediately, I knew I had to be a part of this. I’d spent way too long formatting my braces and wanted the power of prettier everywhere!
Sashko gets us in the room where it happens with a short discussion on how we can move forward with support. Vjeux gives us permission to steal his work, and I take him up on his offer, and soon thereafter initial support for GraphQL in prettier was shipped. It wasn’t perfect, but it was a start.
Opening up the flood gates
Enter Sashko.
Instead of having to wait for every part of GraphQL to be ironed out, Vjeux‘s commitment to iteration made it really easy to get in and out and add things, little by little. I barely had a chance to give it a try myself!
With support for comments and support for template tags (by Lucas Azzola), we had everything we needed for the final launch.
This is just the beginning!
Even with support for GraphQL launched, its not perfect. There’s bound to be corner cases with the existing language, and with new language constructs on the horizon we’re sure to see changes and improvements to how GraphQL can be formatted. Even in the first few hours of its release, Vjeux was hard at work making it work for the GraphQL Schema Language :
Teamwork Makes the Dream Work!
Special thanks to Vjeux and Sashko for the legwork in getting this out the door. Even more thanks to those submitting issues and PRs to make sure what we built is addressing all the corner cases, too. We hope this tool is as useful to you as it has been for us!
