From e8a0a5beab353af16edaa328a216bf0686759ad1 Mon Sep 17 00:00:00 2001 From: Michael <184316+muescha@users.noreply.github.com> Date: Sun, 10 Mar 2019 03:51:16 +0100 Subject: [PATCH] Change to Gatsby develop Data schema Node api --- docs/docs/why-gatsby-uses-graphql.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 61a3c76009c0c..96a578f30dc24 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -49,7 +49,7 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -After running `npm run develop`, you’ll see the following at `localhost:8000/no-data/`: +After running `gatsby develop`, you’ll see the following at `localhost:8000/no-data/`: ![Screenshot of the page generated by the previous code snippet.](./images/why-gql-no-data.png) @@ -102,7 +102,7 @@ const WithContext = ({ pageContext }) => ( export default WithContext ``` -Start the development server with `npm run develop` and visit `localhost:8000/page-with-context/` to see the created page: +Start the development server with `gatsby develop` and visit `localhost:8000/page-with-context/` to see the created page: ![Screenshot of a page with hard-coded context.](./images/why-gql-with-context.png) @@ -192,7 +192,7 @@ const Product = ({ pageContext }) => ( export default Product ``` -Run `npm run develop`, then open `localhost:8000/product/space-socks/` to see one of the generated products. +Run `gatsby develop`, then open `localhost:8000/product/space-socks/` to see one of the generated products. ![Screenshot of a rendered product page.](./images/why-gql-product-json.png) @@ -265,12 +265,12 @@ module.exports = { To check that this worked, let’s use the GraphQL Playground, which is available during development, by running: ``` -GATSBY_GRAPHQL_IDE=playground yarn develop +GATSBY_GRAPHQL_IDE=playground gatsby develop ``` > **NOTE:** The `GATSBY_GRAPHQL_IDE=playground` part of this command is optional. Adding it enables the GraphQL Playground instead of GraphiQL, which is an older interface for exploring GraphQL. -You can explore the available data using the “Docs” tab at the right. +You can explore the available data schema using the “Docs” tab at the right. One of the available options is `allProductsJson`, which contains “edges”, and those contain “nodes”. @@ -337,7 +337,7 @@ exports.createPages = async ({ actions: { createPage }, graphql }) => { } ``` -You need to use the `graphql` helper that’s available to the [`createPages` API](/docs/node-apis/#createPages) to execute the query. To make sure that the result of the query comes back before continuing, use [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). +You need to use the `graphql` helper that’s available to the [`createPages` Node API](/docs/node-apis/#createPages) to execute the query. To make sure that the result of the query comes back before continuing, use [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). The results that come back are very similar to the contents of `data/products.json`, so you can loop through the results and create a page for each. @@ -396,7 +396,7 @@ A few notes about this file: 3. The query uses a [GraphQL fragment](https://www.gatsbyjs.org/packages/gatsby-image/#fragments) to query all the required data for optimized images. GraphQL fragments _do not work_ in the GraphQL Playground. 4. The `img` tag has been swapped out for a `gatsby-image` component named `Image`. Instead of a `src` attribute, it accepts an object with optimized image data. -Save this file, run `npm run develop`, then open `localhost:8000/gql/purple-hat/`: +Save this file, run `gatsby develop`, then open `localhost:8000/gql/purple-hat/`: ![Lazy loaded image of an angry cat wearing the purple hat.](./images/why-gql-images.gif)