Highlighting GraqphQL queries

[tonyxiao]

For es6 tagged strings starting with Relay.QL or gql,
Related

• Highlight GraphQL inside Relay.QL template strings atom/language-javascript#362
• Is there a way to make this work for queries within jsx file? rmosolgo/language-graphql#2

PS: Is there a way to highlight SQL queries already?

[gandm]

I'll add a Relay.QL and gql tag`` option to the grammar.

No way to highlight sql queries. I could add another template sql``and calllanguage-sql to highlight it but it would mean adding a sql function that passes back the ddl/query string. But using this tag name makes a big assumption that the template contains sql.

[tonyxiao]

There are a few relatively unknown libraries trying to add tagged sql strings but they don't have much attention at all relative to Relay.QL or gql. Ideally there's a way for users to specify which language plugin they want to use for syntax highlighting for any given tag.

[tonyxiao]

Is that possible in Atom?

[gandm]

No it's not really possible to make it configurable as it would mean dynamically patching the grammar, and that has other attendant issues, such as running the specs.

[gandm]

I've added support for Relay.QL and gql template strings which uses language-graphql but it seems to have a problem!

I tested using the following code.

var node = Relay.QL`
  node(123) {
      ${Relay.QL`
      name: User {
        address {
          ${fragment},
        },
      }
    `}
  }
`;

This nests a Relay.QL template, but language-graphql doesn't support the ${} interpolation, and also it doesn't give me control back so that I can support it.
This is what it shows me - Is this all you would expect?

or in One Dark theme

[tonyxiao]

I think you're actually expected to use query variables rather than directly do string interpolation. http://docs.apollostack.com/apollo-client/core.html#query So yea not supporting ${} interpolation isn't ideal but probably isn't gonna matter too much in practice.

[gandm]

Just rolled out 2.37.0 that has support for Relay.QL and gql tagged templates. Also comments code inside these templates with a # style comment.

[jquense]

edit: actually reading above indicates that yes, that's the problem. overall i'm finding my fragments to have no additional highlighting but have completely lost the useful bits that used to be there.

👋 hi there, It seems like this update actively makes these queries less readable. My interpolations are now blending in completely to the rest of the string template, whereas before it correctly did normal js syntax highlighting inside the ${} like a normal template literal. Am i correct that this edit is the cause or am I in the wrong place, and if it is right can we please get highlighting back inside the expression?

[jquense]

I think you're actually expected to use query variables rather than directly do string interpolation.

that's not quite right, relay requires you do interpolation here for composing fragments:

Relay.QL`
      fragment on AnalysisImage @relay(plural: true) {
        ${AnalysisImagePlot.getFragment('image')}
        extension
        href
      }
    `,

[tonyxiao]

Hmm maybe we should either disable syntax highlighting for Relay.QL or figure out how to support the string interpolation syntax inside language-graphql?

[gandm]

Ok, I'm not a relay user but I would agree that the language-graphql package doesn't seem to add much in the way of syntax highlighting and also means I loose control over interpolation. There are no sensible ways to support an embedded language inside a template literal unless it is done natively inside language-babel. I could do a PR against the language-graphql grammar so that when a ${} is found he passes control back to me. That would work, but I doubt the author would accept that PR.

I need a view as to what I should do. Revert back to normal template highlighting or follow on this course

[gandm]

I just took a look a the graphql spec and it is pretty simple. I've decided I'll support it directly inside my grammar. I'll then support interpolation and nested queries. Hopefully, I'll release this by the weekend.

[gandm]

@tonyxiao @jquense @jonboiser 2.39.0 has native support for GraphQL inside Relay.QL and gql tagged template strings. Also supports interpolation and the correct commenting using the Atom keyboard shortcut. I'm not sure on the scopes of the various components - should some bits be function, variables, types, keys....,, being unfamiliar with GraphQL any input appreciated. I'm also a bit hazy on some of the grammar as it seems to be a work in progress as far as the spec is concerned.

[jquense]

looks great! so far it's working nicely for me :) thanks!

[tonyxiao]

This is wild @gandm!

[gandm]

Just tweaked the grammar and added a /* Graph QL /* as a template prefix. See https://github.com/gandm/language-babel#graphql-code-highlighting

[tonyxiao]

Wow that's awesome. Thank you @gandm !

[gandm]

@tonyxiao @jquense FYI, for consistency I've just published a new package, language-graphql-lb, which is the grammar graohql from inside language-babel, but it supports .graphql and .gql files. I.e. without JavaScript and flow.

[gre]

How modular is this feature? I was wishing to work on something similar soon and I wish I can write a plugin that can extend support for this.

my need:

// js code here...
// then...
var fragmentShader = GLSL`
precision highp float;
varying vec2 uv;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
`

How can I hook https://github.com/hughsk/language-glsl to this basically?
does that mean I will have to do the same and PR to this lib? (but will it get accepted?)
or can it be detected automatically but the lib? (and how?)

(currently it will obviously highlight as:)

// js code here...
// then...
var fragmentShader = GLSL`
precision highp float;
varying vec2 uv;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
`

[gandm]

@gre Quite simple to do this - Look at the this section of the readme

e.g.

Gives

[gre]

@gandm thanks, awesome!

[gandm]

Look at this section of the readme https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions

Sent from my Windows Phone

---

From: Gaëtan Renaudeaumailto:notifications@github.com
Sent: ‎25/‎10/‎2016 11:23
To: gandm/language-babelmailto:language-babel@noreply.github.com
Cc: Grahammailto:graham.f.clark54@gmail.com; Mentionmailto:mention@noreply.github.com
Subject: Re: [gandm/language-babel] Highlighting GraqphQL queries (#242)

How modular is this feature? I was wishing to work on something similar soon and I wish I can write a plugin that can extend support for it.
I can see that there are still some reference of "graphql" in the language-babel plugin: https://github.com/gandm/language-babel/search?q=graphql&utf8=%E2%9C%93 , does that mean I will have to do the same and PR to this lib? (but will it get accepted?)

my need:

// js code here...
// then...
var fragmentShader = GLSL`
precision highp float;
varying vec2 uv;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
`

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#242 (comment)