From 1b457b6853211a3216d13ff8226dd5d67d50338e Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Thu, 28 Jun 2018 16:25:26 +0700 Subject: [PATCH] [v2][tutorial] Add importing graphql function (#6092) * tutorial-part-four import graphql * tutorial-part-five import graphql * tutorial-part-six import graphql * tutorial-part-seven import graphql * Add "How does the graphql tag work" --- docs/tutorial/part-five/index.md | 6 ++++-- docs/tutorial/part-four/index.md | 36 +++++++++++-------------------- docs/tutorial/part-seven/index.md | 5 +++-- docs/tutorial/part-six/index.md | 1 + 4 files changed, 21 insertions(+), 27 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index ad5e6223a07eb..7e2eaea79b68a 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -106,8 +106,9 @@ Let's try this. Create a new file at `src/pages/my-files.js` with the `allFile` query you just created: -```jsx{5} +```jsx{6} import React from "react" +import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => { @@ -148,8 +149,9 @@ The shape of the data matches the shape of the query. Let's add some code to your component to print out the File data. -```jsx{8-30} +```jsx{9-31} import React from "react" +import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => { diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index f1d7635b49ab8..97ada3e5900da 100644 --- a/docs/tutorial/part-four/index.md +++ b/docs/tutorial/part-four/index.md @@ -248,8 +248,9 @@ Then edit the two components: `src/pages/about.js` -```jsx{4,6,13-22} +```jsx{5,7,14-23} import React from "react" +import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => ( @@ -278,7 +279,7 @@ export const query = graphql` ```jsx{3,8-18,35} import React from "react" import { css } from "react-emotion" -import { StaticQuery, Link } from "gatsby" +import { StaticQuery, Link, graphql } from "gatsby" import { rhythm } from "../utils/typography" @@ -346,27 +347,16 @@ 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? - -You may have noticed that you used a -[tag function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) -called `graphql`, but you never actually _import_ a `graphql` tag. So... how does -this not throw an error? - -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](https://facebook.github.io/relay/) that converts your source code into an -[abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) -during the build step. All `graphql`-tagged templates are found in -[`file-parser.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/file-parser.js) -and -[`query-compiler.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/query-compiler.js), -which effectively removes them from the original source code. This means that -the `graphql` tag isn’t executed the way that you might expect, which is why -there’s no error, despite the fact that you’re technically using an undefined tag -in your source. +## How does the graphql tag work? + +You may have noticed that you used a [tag function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) 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](https://facebook.github.io/relay/) that converts your source code into an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) during the build step. [`file-parser.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/file-parser.js) and [`query-compiler.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Expression_interpolation) with Gatsby's `graphql` tag. ## What's coming next? diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index cb2413ffdeebd..086fda311cb9b 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -286,8 +286,9 @@ Visit one of them and you see: Which is a bit boring and not what you want. Let's pull in data from your markdown post. Change `src/templates/blog-post.js` to: -```jsx{4-5,8-11,14-25} +```jsx{5-6,9-12,15-26} import React from "react" +import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => { @@ -328,7 +329,7 @@ links. ```jsx{3,23-29,45,64-66} import React from "react" import { css } from "react-emotion" -import { Link } from "gatsby" +import { Link, graphql } from "gatsby" import { rhythm } from "../utils/typography" import Layout from "../components/layout" diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 6a27b2e2c73dc..61379e49e850b 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -104,6 +104,7 @@ the following to add a query with some initial HTML and styling. ```jsx import React from "react" +import { graphql } from "gatsby" import { css } from "react-emotion" import { rhythm } from "../utils/typography" import Layout from "../components/layout"