Js-graphql-intellij-plugin: [Feature request] Support injection/highlighting in gatsby's "graphql(`...`)"

[le0nik]

Thanks for an incredibly useful plugin!

Gatby has an unusual way of calling graphql in it's Node Apis.

const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

In this case graphql is not a tag, but a function that returns a Promise. It would be nice if this plugin was able to recognize queries inside of it. You can see an official example here https://www.gatsbyjs.org/docs/node-apis/#createPages

[jimkyndemeyer]

Hi le0nik.

Thanks for using the plugin.

I'll label this as an enhancement.

For now you can manually trigger GraphQL language injection by adding a //language=GraphQL comment on the line above the graphql function, e.g.:

//language=GraphQL
const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

Best regards,
Jim.

[koresar]

I believe syntax highlight detection is different per framework.

Example.

1. Gatsby - graphql(
2. Apollo - gql(
3. My project - dispatch("graphql/query",
4. VSCode defaults - const QUERY = /* GraphQL */

In other words, this should be configurable.

[jimmyn]

Please add support for /* GraphQL */, this is very much needed

[stingrigs]

any updates on that?

[coyotte508]

There's also this that is supported in VSCode: adding #graphql at the beginning of the graphql query, which is less boiler plate than //language=GraphQL:

const query = `#graphql
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `

It could also help with the other use cases (gatsby, ...) although it being configurable would obviously be better.

[FelixTellmann]

Another option to have the syntax highlighting done automatically is to set up Language Injection.

If you use the Places Pattern:

+ jsLiteralExpression().withParent(psiElement().withText(string().contains("/* GraphQL */")))

Works great for me, but I haven't tested it for any side effects. Then again, I'm also not using the /* GraphQL */ comment anywhere else.