"Programmatically create pages from data" tutorial doesn't build on Netlifly

Description

My gatsby code builds locally but doesn’t build on Netlifly due to problems with a missing query field:

4:40:44 PM: success initialize cache - 0.073s
4:40:44 PM: success copy gatsby files - 0.043s
4:40:44 PM: success onPreBootstrap - 0.003s
4:40:44 PM: success createSchemaCustomization - 0.003s
4:40:45 PM: success source and transform nodes - 0.112s
4:40:45 PM: success building schema - 0.344s
4:40:45 PM: error There was an error in your GraphQL query:
4:40:45 PM: Cannot query field "fields" on type "File".
4:40:45 PM: not finished createPages - 0.032s
4:40:45 PM: Skipping functions preparation step: no functions directory set

Steps to reproduce

The code is available in this tutorial, but I’ve modified it to use with .html files. Obviously the GraphQL query will index some files that are not the .html files and that will have fields: null.

This is the query:

exports.createPages = async ({ graphql, actions }) => {
    // **Note:** The graphql function call returns a Promise
    // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
    const { createPage } = actions
    const result = await graphql(`
        query {
            allFile {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `);

    // Create a page for each slug starting with "/cheatsheet/"
    result.data.allFile.edges.forEach(({ node }) => {
        if (node.fields !== null && typeof node.fields.slug !== 'undefined' && node.fields.slug.includes("/cheatsheet/")) {
            createPage({
                path: node.fields.slug,
                component: path.resolve(`./src/templates/cheatsheet.js`),
                context: {
                    slug: node.fields.slug,
                },
            })
        }
    });
}

Expected result

The build should work on Netlifly just like it works locally.

Actual result

It doesn’t build with the above error.

Environment

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 72.0.2
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-cli: ^2.8.21 => 2.8.21
    gatsby-image: ^2.2.34 => 2.2.34
    gatsby-plugin-google-analytics: ^2.1.31 => 2.1.31
    gatsby-plugin-manifest: ^2.2.31 => 2.2.31
    gatsby-plugin-offline: ^3.0.27 => 3.0.27
    gatsby-plugin-postcss: ^2.1.18 => 2.1.18
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
    gatsby-plugin-sharp: ^2.3.5 => 2.3.5
    gatsby-source-filesystem: ^2.1.43 => 2.1.43
    gatsby-transformer-sharp: ^2.3.7 => 2.3.7

[jonniebigodes]

@marcysutton i think the tutorial should stay as is, simple concise and focused on the task at hand. This particular case is somewhat of a edge case that could be documented further, possibly through adding a advanced case scenario. @Pet3ris yes, adding html is perfectly valid in markdown and it will parsed by the plugin mentioned in the tutorial, And no need to thank, i’m more than happy to help you out

[Pet3ris]

One thing that was mentioned to me in Discord by someone else and may be worth adding into the tutorial is that markdown files accept html and hence that technique could easily be used for html. They had gone through my path until realizing this 😃.