Vetur: Support GraphQL custom block

[leopiccionia]

• [X] I have searched through existing issues
• [X] I have read through docs
• [X] I have read FAQ

Problem

Some emerging Vue frameworks, remarkably Gridsome, use GraphQL custom blocks for data pre-fetching. Nonethewise, Vetur currently doesn't support GraphQL custom block highlighting.

A possible obstacle is that currently VS Code, by default, doesn't include a graphql language server (for file extension gql).

[octref]

We do have custom block support, so this is not hard to do. I just need to register graphql as one of the embeddable languages.

[tyankatsu0105]

@octref
Hi👋
I'm always helped by Vetur :)
I'm looking forward to this work!!

[Airkro]

@octref
Many frameworks use custom block to implement a wide variety of functions. I think the lang attribute should be supported.

<config lang="json">
{
  "foo": "baz"
}
</config>

<i18n lang="yaml">
...
</i18n>

[octref]

Can someone post an example and link to docs, how does a graphql custom block look like?

[leopiccionia]

@octref Here, <page-query> and <static-query> are custom GraphQL blocks: https://gridsome.org/docs/data-query-data

[octref]

@leopiccionia I'm not familiar with gridsome — are these builtin custom blocks, or do you declare <my-query> somewhere in the code and can start using them?

[leopiccionia]

@octref The Vue blocks are builtin. AFAIK the queries run against a local (GraphQL) server, on server-side (similarly to Nuxt's asyncData).

[monachilada]

@leopiccionia I'm not familiar with gridsome — are these builtin custom blocks, or do you declare <my-query> somewhere in the code and can start using them?

@octref There are two types:
<page-query> for pages and templates
<static-query> for layout and components

It's just regular GraphQL between the tags. And yes, you declare those in your .vue file and can use them directly in your templating.

[octref]

Here you go:

Steps:

• Install one of the VS Code Graphql extensions

• Have this setting:

  "vetur.grammar.customBlocks": {
  "docs": "md",
  "i18n": "json",
  "page-query": "graphql"
  },
  

• Run command Vetur: Generate Grammar

[brianzelip]

The solution above worked for me...except for <static-query>. So be sure to add it after page-query, like so:

"vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json",
    "page-query": "graphql",
    "static-query": "graphql"
  }

[Berkmann18]

For those wondering why it doesn't highlight it even after applying @octref 'solution, try restarting VSCode. It didn't work for me when I changed the setting, but after opening VSCode the next day it worked.

[octref]

Per reloading, I added some docs to https://vuejs.github.io/vetur/highlighting.html

[dosstx]

How do you run command this command in VSCODE?
Vetur: Generate Grammar

[leopiccionia]

@dosstx You can run it via the Command Palette (Ctrl+Shift+P).

[m3hari]

Isn't it better to make Vetur: Generate Grammar command automatic? Are their limitations in VsCode API to detect config change 🤔

[octref]

Yes, that is not allowed: https://github.com/microsoft/vscode/issues/68647

[djmtype]

Thanks to the post I have syntax highlighting working on the queries, but how do we get proper indentation?

[pmfeo]

Thanks to the post I have syntax highlighting working on the queries, but how do we get proper indentation?

Any update on this?