Support for <page-query> GraphQL tag in Vue files

[cimocimocimo]

I saw that GraphQL indentation is supported in JSX files https://github.com/fxbois/web-mode/issues/866

Wondering if this is possible for Vue files with GraphQL queries as well? This is an example from the Gridsome docs:

<template>
  <div>
    <div v-for="edge in $page.posts.edges" :key="edge.node.id">
      <h2>{{ edge.node.title }}</h2>
    </div>
  </div>
</template>

<page-query>
query {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

Apologies in advance if this is possible through configuration alone.

Thank you!

[fxbois]

@cimocimocimo can you provide a link about the specs ?

[cimocimocimo]

Sorry, I thought I had included the link to the docs: How to query with GraphQL

Essentially, I'm looking for the Graph QL query in the tags to be properly indented. When using web-mode currently all the text between the tags is not indented at all but flush to the left side.

Please let me know if you need any more info.

[sunilw]

Jumping in to say that this would be useful for frameworks other than vue.

At the moment I'm using composing graphql in files that are both in modern js and jsx. Having decent indentation for graphql in web-mode would be fantastic.

This is an example of the syntax I'm working with:

exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    {
      allWpPost {
        nodes {
          id
          uri
        }
      }
    }
  `)
}