Webstorm and GraphQL

I have started working with Gridsome, a Vue derivative, which uses GraphQL Queries. The vue file will have a query section like this:

```

<page-query>
query ($page: Int) {
posts: allPost(perPage: 5, page: $page, filter: { published: { eq: true }}) @paginate {
totalCount
pageInfo {
totalPages
currentPage
isFirst
isLast
}
edges {
node {
id
title
date (format: "MMM DD, YYYY")
timeToRead
description
cover_image (width: 770, height: 380, blur: 10)
path tags {
id
title
path
}
}
}
}
}
</page-query>

When I format the code, the code in the page-query section is re-formatted as a paragraph, which is not ideal. I can wrap the code block with @formatter:off ...@formatter:on, but again this is not ideal. In VSCODE, the entire block of code is ignored because it is not of the type expected in a Vue file. Is there any known workaround, setting, or plugin at this time for this use case?

 

3 comments
Comment actions Permalink

Try adding page-query to Keep white spaces inside list in Settings | Editor | Code Style | HTML | Other; indent of text inside tags is made of whitespaces; when this option is enabled, <page-query> tags won't be touched by formatter

3
Comment actions Permalink

Oh thank your Elena that worked perfectly.

0
Comment actions Permalink

Thank you Elena it works now :)

0

Please sign in to leave a comment.