[v2][tutorial] Add importing graphql function #6092
Conversation
|
Deploy preview for using-drupal ready! Built with commit c35f6d8 |
|
Deploy preview for gatsbygram ready! Built with commit c35f6d8 |
| @@ -346,28 +347,6 @@ So almost everywhere, changes you make will immediately take effect. | |||
| Try editing the title in `siteMetadata`—change the title back to "Pandas Eating | |||
| Lots". The change should show up very quickly in your browser. | |||
|
|
|||
| ## Wait — where did the graphql tag come from? | |||
There was a problem hiding this comment.
I've held off on merging this as I'm wondering what to do about this section. It's great that we don't have to explain how the graphql tag works without being imported. BUT this is still working in the same way behind the scenes. So I wonder if a simplified version of this question and answer should stay in the tutorial?
Maybe something like:
How does the graphql tag work?
You may have noticed that you used a tag function called graphql. Behind the scenes Gatsby handles these tags in a particular way - let's explore what actually happens when you use Gatsby's graphql tag:
The short answer is this: during the Gatsby build process, GraphQL queries are
pulled out of the original source for parsing.
The longer answer is a little more involved: Gatsby borrows a technique from
Relay that converts your source code into an abstract syntax tree (AST) during the build step. file-parser.js and query-compiler.js pick out your graphql-tagged templates and effectively remove them from the original source code.
This means that the graphql tag isn’t executed the way that you might expect.
For example, you cannot use expression interpolation with Gatsby's graphql tag.
There was a problem hiding this comment.
cc @KyleAMathews for thoughts on this too.
There was a problem hiding this comment.
This is the sort of "optional" content that could fit well in a note or callout component (#5612)
Closes #6055.