[Feature] Support for Gridsome GraphQL blocks

[matthewmorek]

I'd love to have a formatter and syntax highlight for Vue syntax that incorporates Gridsome GraphQL query blocks, such as:

<page-query>
  query Article($id: String!) {
    contentfulCaseStudy(id: $id) {
      id
      title
      slug
      intro(html: true)
    }
  }
</page-query>

Currently, no formatting or syntax highlighting is available for .vue files that use these blocks. Would that be something worthy of consideration for this package?

Reference

• https://graphql.org/learn/queries/
• https://gridsome.org/docs/querying-data/

Example

  query-tag:
    - match: (<)(page-query|static-query)(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.block.any.html
        3: punctuation.definition.tag.end.html
      push: "Packages/GraphQL/GraphQL.sublime-syntax"
      with_prototype:
        - match: (</?)(page-query|static-query)(>)
          captures:
            1: punctuation.definition.tag.begin.html
            2: entity.name.tag.block.any.html
            3: punctuation.definition.tag.end.html
          pop: true

Result

I would love to help and submit a PR, and the above YAML is the result of me spending a couple of hours learning how .sublime-syntax works and putting a few things together, but I'm worried this code ain't good enough since it contains a hard-coded path to an external package.

The question is: how can I reference an external sublime-syntax without using hard-coded refs like this one? Can anyone help a little getting this to a PR-ready state?

[matthewmorek]

I've managed to improve the above query-tag block and it now looks like this:

  query-tag:
    - match: (<)(page-query|static-query)(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.block.any.html
        3: punctuation.definition.tag.end.html
      embed: scope:source.graphql
      embed_scope: source.graphql
      escape: (</?)(page-query|static-query)(>)
      escape_captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.block.any.html
        3: punctuation.definition.tag.end.html

Any thoughts on the implementation?

[matthewmorek]

Gridsome it seems is no longer actively developed/maintained, so it does not make sense to keep this issue open.