[1.0] Question: why can you use graphql in templates?

[rstacruz]

The 1.0 boilerplate has this in template pages:

export const pageQuery = graphql`
  query MyQuery($slug: String!) {
    ..
  }
`

But linters will complain here:

'graphql' is not defined.

True enough, when you try to do see what graphql is, it's not defined:

console.log(graphql)
// => undefined

How does this sorcery work?

[0x80]

The sources are processed with Babylon in file-parser.js and the queries are extracted from the AST in query-compiler.js

[jquense]

yeah the down and dirty reason it works is that the queries are removed from the source code before they are run.

[KyleAMathews]

Several people have asked about this — perhaps we just need to make sure this is covered in the tutorial + GraphQL docs so people aren't confused? I remember being confused for similar reasons back in the day when I first used Relay :-)

[bradennapier]

Seems like what you really need is an eslint plugin so people aren't having to make a bunch of comments or remove their linting to support Gatsby without a bunch of errors everywhere.

[jlengstorf]

I just ran into this question while setting up ESLint, so I took a crack at expanding the tutorial to explain why this doesn't explode in #2965. Someone who understands this better should probably review pretty closely, though, because I only sorta get how this works. 😅

[KyleAMathews]

Closing this as there's another issue about including a custom gatsby eslint plugin #2446 (comment)