Format/Prettyprint gql `template strings` in GraphQL Apollo-client (PhpStorm)

Question

When I have

query: gql`query FetchUsers { users {  id   email }}`

What is a fast way to make it look like this:

 query: gql`query FetchUsers {
                users {
                    id
                    email
                }
            }`

Or do I need to insert GraphQL expressions in another way in order to get readable formatting?

Answer 1

You can install and configure prettier to your project. Then install the Prettier plugin for Webstorm, which will add a Reformat with Prettier action and keyboard shortcut to Webstorm. You can also configure it to work with a file watcher to automatically reformat your file when you save it.

Barring that, if your GraphQL server is running either GraphiQL or GraphQL Playground, both of those tools have a "prettify" function to reformat the query. Or you could use some online tool like this one from Sangria.