
In the FruitOrVegetable type example, we have several fields that are irrelevant for much of the data this type should represent. The single source of truth we get from a schema is only as good as our ability to rely upon the capabilities it describes. When we create a type that includes irrelevant or non-existent data, we neglect one of the core strengths of GraphQL. But if we cram two types together, unique attributes included, someone could reasonably ask for a fruit's vegetableFamily, or a vegetable's list of ripenessIndicators - and wonder why they don't get the data they're expecting! Object types allow us to draw clear boundaries around a type of thing in our service, and its different details we might want to query for. But this approach creates more work for anyone using the graph - and it doesn't actually represent the reality of our data! Well, it might seem like a small problem now when we're talking about fruits and vegetables. When we run this query, we'll see that even our fruit objects have a vegetableFamily property - but its value is null! The same is true of our vegetable objects: we see a hasEdibleSeeds property even though vegetables, by definition, contain no seeds.īut why does this matter? We could just accept the null values for the fields that don't apply for each type, right? Thanks to for the awesome work! const EqualDivider = styled. If you are using styled-components or styled-jsx, prettier will now reformat the CSS inside of your template expressions. Note that it only supports the open source syntax of GraphQL, therefore doesn't work with Relay Classic, it only works with Relay Modern. graphql files and within JavaScript templates that start with graphql, graphql.experimental and gql in order to work with Relay and Apollo. Thanks to and prettier now supports printing GraphQL queries! He wrote a very interesting blog post Adding a new layout strategy to Prettier that I highly recommend reading if you're interested in how prettier is working behind the scenes.

spent a bunch of time improving JSX support and in the process implemented a new primitive to prettier: fill. We're also adding support for new languages: GraphQL queries, embedding CSS-in-JS and JSON are now available in prettier! Blog Post: Adding a new layout strategy to Prettier by is not only a useful tool but it's also a really cool piece of technology. We've introduced TypeScript and CSS in the last release and are doing a batch of fixes for them in this release. Now that JavaScript needs for support is trending down, it's an opportunity to support other languages that front-end developers are working on and want formatted. We're not 100% there yet, but we're closer than ever!
Graphql query beautifier code#
The goal is to find a good place where when people report code that is printed in a funny way, we can't make it better without making other pieces of code look worse, introduce behavior that's very hard to understand for humans and doesn't introduce some disproportionate complexity to the codebase.


No automated tool is going to print perfect code for all the possible edge cases. This is the release I've been waiting for a very long time: one that has only minimal changes to JavaScript!įor the past 6 months, we kept doing changes to various aspects of printing JavaScript, with the hope that one day we would get to a stable place. This release adds GraphQL formatting support, CSS-in-JS (including styled-components), and JSON support to Prettier.
